Comment obtenir la valeur d'une cellule de tableau à l'aide de jQuery ?

Question

J'essaie de trouver comment obtenir la valeur d'une cellule de tableau pour chaque ligne en utilisant jQuery.

Ma table ressemble à ceci :

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

En gros, je veux boucler le tableau et obtenir la valeur de l'élément Customer Id pour chaque ligne.

Dans le code ci-dessous, j'ai compris que je devais faire cela pour que la boucle passe par chaque ligne, mais je ne sais pas comment obtenir la valeur de la première cellule de la ligne.

$('#mytable tr').each(function() {
    var cutomerId = 
}

Answer 1

Si vous le pouvez, il peut être intéressant d'utiliser un attribut de classe sur le TD contenant l'ID du client afin de pouvoir écrire :

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

C'est essentiellement la même chose que les autres solutions (peut-être parce que j'ai fait un copier-coller), mais elle a l'avantage que vous n'aurez pas besoin de modifier la structure de votre code si vous déplacez les colonnes, ou même si vous mettez l'ID du client dans un fichier de type <span> à condition de conserver l'attribut de classe.

D'ailleurs, je pense que vous pourriez le faire en un seul sélecteur :

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

Si cela rend les choses plus faciles.

Answer 2

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

Ce que vous faites est d'itérer à travers tous les trs dans la table, trouver le premier td dans le tr actuel dans la boucle, et extraire son html interne.

Pour sélectionner une cellule particulière, vous pouvez la référencer avec un index :

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

Dans le code ci-dessus, je vais récupérer la valeur de l'objet troisième rangée (l'index est basé sur zéro, donc le premier index de cellule serait 0)

---

Voici comment vous pouvez le faire sans jQuery :

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

Answer 3

Une approche moins farfelue :

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

il est évidemment possible de le modifier pour qu'il fonctionne avec des cellules qui ne sont pas les premières.

Answer 4

$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});

Answer 5

Essayez ça,

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});