jQuery obtient la balise td dans le tableau-js tutoriel-php.cn

jQuery obtient la balise td dans le tableau

小云云

Libérer： 2017-12-31 15:49:38

original

1825 Les gens l'ont consulté

Cet article vous apporte principalement un article sur jQuery pour obtenir la balise td dans le tableau (explication avec exemples). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Tout d'abord, permettez-moi de vous présenter les problèmes que j'ai rencontrés

1 Lorsqu'un tableau contient des balises et

<tr>
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td>
      @scene.QRUrl
    </td>
    <td>
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片，展示图片，没有图片生成图片-->
      <!--判断localUrl（本地服务器路径）是否为空，如果为空，表示没有生成，如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空，展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空，生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
</tr>

Copier après la connexion

2. Il y a un événement onclick ici. Tout ce que j'ai à faire est de cliquer sur le lien "Générer" et de trouver la balise 🎜>

Nous cliquons d'abord sur la balise a pour exécuter l'événement click dans jQuery

function build(sender){ var jqSender = $(sender); Ici, l'objet js est converti en un jquery via $() , le contenu suivant est placé entre les deux "+".

var sceneid = jqSender.attr('sceneid'); //attr peut trouver la valeur de l'attribut de l'objet

J'ai besoin d'obtenir le. td tag , je dois d'abord savoir dans quelle ligne il se trouve, ce qui équivaut au positionnement. Par exemple : il y a la route n°1 de Nanjing à Pékin, et il y a la route n°1 de Nanjing à Chengdu. Vous me demandez où je suis, et je vous dis que je suis au n°1 de la route de Nanjing. Je suis sûr que je sois à Pékin ou à Chengdu, donc nous devrions Pour localiser, disons que nous sommes au n°1 de Nanjing Road, Chengdu.

Il est préférable d'utiliser eq() pour obtenir une certaine ligne ici. Si le code de la page doit être modifié, cela sera très gênant. Par exemple, si vous voulez vous rappeler où se trouve ma maison, ce que vous devez connaître, c'est la rue et le numéro de la maison. Vous savez seulement que la première maison de cette rue est ma maison. Si quelqu'un d'autre ajoute une nouvelle maison ici, ce sera le cas. pas la première maison. (L’analogie est un peu inappropriée, mais les ordinateurs sont si rigides).

Donc, nous définissons un identifiant pour ce tr et une classe pour QRUrl et LocalUrl. Le code est le suivant :

<tr sceneid="@scene.ID">
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td class="wxurl-col">
      @scene.QRUrl
    </td>
    <td class="localurl-col">
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片，展示图片，没有图片生成图片-->
      <!--判断localUrl（本地服务器路径）是否为空，如果为空，表示没有生成，如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空，展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空，生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
  </tr>

Copier après la connexion

Ensuite, vous pouvez le trouver dans jQuery comme ceci :

La balise td vient d'être trouvée mais n'est pas utilisée.

<script type="text/javascript">
  function build(sender) {
    var jqSender = $(sender);
    var sceneid = jqSender.attr('sceneid');

    //找到指定行类名为wxurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.wxurl-col')

    //找到指定行类名为localurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.localurl-col')

    //找到点击事件的a标签
    jqSender

}
</script>

Copier après la connexion

La méthode est comme ceci, ajoutez des "coordonnées" à l'élément, pourquoi sont-ils respectivement l'identifiant et le nom de la classe ? Tout d'abord, il y a plusieurs lignes. La seule façon de le déterminer de manière unique est d'ajouter un identifiant. Lorsque la ligne est déterminée, la colonne peut être soit id, soit class, il est recommandé d'utiliser class pour faciliter la gestion de notre CSS

Remarque : cet essai est à titre de référence uniquement, et il y a de nombreux petits défauts. Le plus important n’est pas le code, c’est la logique qui compte.

Recommandations associées :

Explication détaillée de l'implémentation de jQuery pour obtenir le numéro de ligne et le numéro de colonne de la position du clic de souris dans le tableau

Comment obtenir la table en JavaScript La valeur d'une certaine colonne

Le code d'implémentation de l'utilisation de jQuery pour obtenir l'identifiant de ligne et la valeur td dans la table_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!