Come ottenere un valore di cella di una tabella usando jQuery?

213

Sto cercando di capire come ottenere il valore della cella della tabella per ogni riga usando jQuery.

Il mio tavolo è simile al seguente:

<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>

Fondamentalmente voglio scorrere la tabella e ottenere il valore della Customer Idcolonna per ogni riga.

Nel codice qui sotto ho scoperto che devo farlo per farlo scorrere attraverso ogni riga, ma non sono sicuro di come ottenere il valore della prima cella della riga.

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

jquery

— Sean Taylor
fonte

4

Ecco il tutorial completo con demo live su come ottenere il valore TD della cella della tabella codepedia.info/jquery-get-table-cell-td-value-div

— Satinder singh

306

Se possibile, potrebbe valere la pena utilizzare un attributo class sul TD contenente l'ID cliente in modo da poter scrivere:

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

In sostanza, è uguale alle altre soluzioni (forse perché ho copiato e incollato), ma ha il vantaggio di non dover cambiare la struttura del codice se ci si sposta tra le colonne o addirittura inserire l'ID cliente in un <span>, purché mantenga l'attributo class con esso.

A proposito, penso che potresti farlo in un solo selettore:

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

Se questo rende le cose più facili.

— Jennifer
fonte

4

Direi $ ('# mytable td.customerIDCell'). Each (function () {alert ($ (this) .html ());}); ma +1

— Matt Briggs il

:-) grazie - ma se vuoi metterlo in un intervallo (potrei aver formattato male l'intervallo nella mia risposta!)

— Jennifer

2

L'uso della classe su tr è particolarmente utile se ti capita di avere <td> all'interno di un <tfoot> (o stai usando <td> invece di <th>) e non li vuoi.

— Frank Luke,

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

— Osama khodrog,

ma se voglio ottenere il tr html anche allora cosa possiamo fare

— Developer

132

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

Quello che stai facendo è scorrere tutte le tr nella tabella, trovare la prima td nella tr corrente nel loop ed estrarre il suo html interno.

Per selezionare una cella particolare, puoi fare riferimento a loro con un indice:

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

Nel codice sopra, recupererò il valore della terza riga (l'indice è a base zero, quindi il primo indice di cella sarebbe 0)

Ecco come puoi farlo senza 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;
}

— Andreas Grech
fonte

1

Grazie, questo mi è stato più utile in quanto non ho il controllo sul markup del documento che desidero analizzare usando jQuery. Quindi essere in grado di usare "td: first", "td: last", ecc. È stato di grande aiuto.

— atomici

1

eq (2) otterrebbe il valore della terza colonna, non della terza riga.

— live-love,

Cos'è l'eq (2) nel tuo codice? Intendo 2 è l'indice di quale td o tr?

— TechnicalKalsa,

@Singh L'elemento all'indice 2 della tdraccolta restituito dalla find("td")funzione.

— Andreas Grech,

Mi piace l'opzione 2 con l'indice come ref, il mio violino qui

— HattrickNZ,

18

un approccio meno fantasioso:

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

questo può ovviamente essere cambiato per funzionare con non le prime celle.

— piede di porco
fonte

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
fonte

2

Non è necessario saltare la prima riga, perché contiene <th>, non <td>, quindi i loro dati non verranno estratti

— Andreas Grech

7

Prova questo,

$(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
fonte

1

del secondo elemento, non il primo, l'eq inizia da 0

— Claudiu Creanga,

4

Non usi id per quella colonna? Dillo:

    <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
fonte

4

Questo funziona

$(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
fonte

2

prova questo :

<!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
fonte

2

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

— Jithin
fonte

2

Un esempio funzionante: 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
fonte