web-dev-qa-db-fra.com

Jquery - Récupère la valeur du premier td dans le tableau

J'essaie d'obtenir la valeur du premier td dans chaque tr lorsqu'un utilisateur clique sur "clic".

Le résultat ci-dessous affichera aa, ee ou ii. Je pensais utiliser le plus proche ('tr') .. mais cela produisait toujours "Object object". Je ne sais pas quoi faire sur celui-ci.

Mon html est

 <table>
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ii</td>
      <td>jj</td>
      <td>kk</td>
      <td>ll</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
</table>

Jquery

$(".hit").click(function(){

 var value=$(this).// not sure what to do here

 alert(value)  ;

});
jqueryselecthtml-table
29
FlyingCat
$(this).parent().siblings(":first").text()

parent vous donne le <td> autour du lien,

siblings donne toutes les balises <td> dans ce <tr>,

:first Donne le premier élément correspondant de l'ensemble.

text() donne le contenu de la balise.

62
Tesserex

Cela devrait fonctionner:

$(".hit").click(function(){    
   var value=$(this).closest('tr').children('td:first').text();
   alert(value);    
});

Explication:

  • .closest('tr') obtient l'ancêtre le plus proche qui est un élément <tr> (donc dans ce cas, la ligne où le <a> est dans).
  • .children('td:first') récupère tous les enfants de cet élément, mais avec le sélecteur :first nous le réduisons au premier <td> élément.
  • .text() récupère le texte à l'intérieur de l'élément

Comme vous pouvez le voir dans les autres réponses, il n'y a pas qu'une seule façon de procéder.

39
Felix Kling

Dans le cas spécifique ci-dessus, vous pouvez faire du jonglage parent/enfant.

$(this).parents("tr").children("td:first").text()
11
Inaimathi
$(".hit").click(function(){
   var values = [];
   var table = $(this).closest("table");
   table.find("tr").each(function() {
      values.Push($(this).find("td:first").html());
   });

   alert(values);    
});

Vous devez éviter $(".hit") c'est vraiment inefficace. Essayez plutôt d'utiliser la délégation d'événements.

4
Caleb

Installez Firebug et utilisez console.log au lieu de alert. Ensuite, vous verrez l'élément exact auquel vous accédez.

3
Marc

Si vous devez obtenir tous les td à l'intérieur de tr sans leur définir d'ID, vous pouvez utiliser le code ci-dessous:

var items = new Array();

$('#TABLE_ID td:nth-child(1)').each(function () {
      items.Push($(this).html());
});

Le code ci-dessus ajoutera toutes les premières cellules du tableau dans une variable de tableau.

vous pouvez changer nth-child (1) ce qui signifie que la première cellule à n'importe quel numéro de cellule dont vous avez besoin.

j'espère que ce code vous aidera.

2
Shadmehr Vadoodi