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

213

J'essaie de trouver comment obtenir la valeur de la cellule du tableau pour chaque ligne à l'aide de 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>

Je veux essentiellement parcourir la table et obtenir la valeur de la Customer Idcolonne pour chaque ligne.

Dans le code ci-dessous, j'ai compris que je devais le faire pour le faire boucler sur 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 = 
}

jquery Sean Taylor
la source

4

Voici un tutoriel complet avec une démonstration en direct sur la façon d'obtenir la valeur TD des cellules d'un tableau codepedia.info/jquery-get-table-cell-td-value-div

Satinder singh

306

Si vous le pouvez, il peut être utile d'utiliser un attribut de classe sur le TD contenant l'ID client afin que vous puissiez écrire:

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

Essentiellement, c'est la même chose que les autres solutions (peut-être parce que j'ai copié-collé), mais a l'avantage que vous n'aurez pas besoin de changer la structure de votre code si vous vous déplacez dans les colonnes, ou même mettez l'ID client dans un <span>, à condition de conserver l'attribut class avec.

Soit dit en passant, je pense que vous pouvez le faire dans un seul sélecteur:

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

Si cela rend les choses plus faciles.

Jennifer
la source

4

Je dirais $ ('# mytable td.customerIDCell'). Each (function () {alert ($ (this) .html ());}); mais +1

Matt Briggs

:-) merci - mais si vous voulez le mettre dans un span (j'ai peut-être mal formaté le span dans ma réponse!)

Jennifer

2

L'utilisation de la classe sur le tr est particulièrement utile si vous avez <td> dans un <tfoot> (ou si vous utilisez <td> au lieu de <th>) et que vous n'en voulez pas.

Frank Luke

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

Osama khodrog le

mais si je veux obtenir le tr html aussi, alors ce que nous pouvons faire

Développeur

132

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

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

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

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

Dans le code ci-dessus, je récupérerai la valeur de la troisième ligne (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;
}

La

Andreas Grech
la source

1

Merci, cela m'a été plus utile car je n'ai aucun contrôle sur le balisage du document que je souhaite analyser à l'aide de jQuery. Donc, être en mesure d'utiliser "td: premier", "td: dernier", etc. a été d'une grande aide.

atomicules

1

eq (2) obtiendrait la valeur de la troisième colonne, pas de la troisième ligne.

live-love

Qu'est-ce que l'eq (2) dans votre code? Je veux dire 2 est l'indice dont td ou tr?

TechnicalKalsa

@Singh L'élément à l'index 2 de la tdcollection retourné par la find("td")fonction.

Andreas Grech

J'aime l'option 2 avec l'index comme référence, mon violon ici

HattrickNZ

18

une approche moins jquerish:

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

cela peut évidemment être modifié pour fonctionner avec des cellules qui ne sont pas les premières.

Jimmy
la source

8

$('#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();
  }
});

Strelok
la source

2

Il n'est pas nécessaire de sauter la première ligne, car elle contient <th>, pas <td>, de sorte que leurs données ne seront pas extraites

Andreas Grech

7

Essaye ç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.
    });
});

Nikhil Dinesh
la source

1

du deuxième élément, pas du premier, eq commence à 0

Claudiu Creanga

4

Vous n'utilisez pas id pour cette colonne? dis ça:

    <table width="300" border="1">
          <tr>
            <td>first</td>
          </tr>
          <tr>
            <td>second</td>
          </tr> 
          <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td id="result">Where the result should occur</td>
          </tr>
    </table>


<script type="text/javascript">
        $('#result').html("The result is....");
</script>

MOH3n MOH
la source

4

Cela marche

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});

David
la source

2

essaye ça :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

mohammad
la source

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

jithin
la source

2

Un exemple de travail: http://jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});

Gazmend Hoxha
la source

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

Réponses: