Wie erhalte ich mit jQuery einen Tabellenzellenwert?

213

Ich versuche herauszufinden, wie der Wert der Tabellenzelle für jede Zeile mit jQuery ermittelt werden kann.

Mein Tisch sieht so aus:

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

Grundsätzlich möchte ich die Tabelle durchlaufen und den Wert der Customer IdSpalte für jede Zeile ermitteln.

Im folgenden Code habe ich herausgefunden, dass ich dies tun muss, damit es jede Zeile durchläuft, aber ich bin nicht sicher, wie ich den Wert der ersten Zelle in der Zeile erhalten soll.

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

jquery

— Sean Taylor
quelle

4

Hier ist ein vollständiges Tutorial mit einer Live-Demo zum Abrufen

— Satinder singh

306

Wenn Sie können, kann es sinnvoll sein, ein Klassenattribut auf dem TD zu verwenden, das die Kunden-ID enthält, damit Sie schreiben können:

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

Dies ist im Wesentlichen dasselbe wie bei den anderen Lösungen (möglicherweise, weil ich sie kopiert habe), hat jedoch den Vorteil, dass Sie die Struktur Ihres Codes nicht ändern müssen, wenn Sie sich in den Spalten bewegen oder sogar die Kunden-ID in eine einfügen <span>vorausgesetzt, Sie behalten das Klassenattribut bei.

Übrigens, ich denke, Sie könnten es in einem Selektor tun:

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

Wenn das die Sache einfacher macht.

— Jennifer
quelle

4

Ich würde sagen $ ('# mytable td.customerIDCell'). Each (function () {alert ($ (this) .html ());}); aber +1

— Matt Briggs

:-) danke - aber was ist, wenn Sie es in eine Spanne setzen wollen (ich habe die Spanne in meiner Antwort möglicherweise schlecht formatiert!)

— Jennifer

2

Die Verwendung der Klasse auf dem tr ist besonders hilfreich, wenn Sie zufällig <td> in einem <tfoot> haben (oder <td> anstelle von <th> verwenden) und diese nicht möchten.

— Frank Luke

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

— Osama Khodrog

aber wenn ich das tr html auch bekommen will dann was wir tun können

— Entwickler

132

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

Was Sie tun, ist, alle trs in der Tabelle zu durchlaufen, das erste td im aktuellen tr in der Schleife zu finden und sein inneres HTML zu extrahieren.

Um eine bestimmte Zelle auszuwählen, können Sie sie mit einem Index referenzieren:

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

Im obigen Code werde ich den Wert der dritten Zeile abrufen (der Index basiert auf Null, sodass der Index der ersten Zelle 0 wäre).

So geht's ohne 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
quelle

1

Vielen Dank, dies war für mich nützlicher, da ich keine Kontrolle über das Markup des Dokuments habe, das ich mit jQuery analysieren möchte. Es war also eine große Hilfe, "td: first", "td: last" usw. verwenden zu können.

— Atomicules

1

Gleichung (2) würde den Wert der dritten Spalte erhalten, nicht der dritten Zeile.

— Live-Liebe

Was ist Gleichung (2) in Ihrem Code? Ich meine 2 ist Index von welchem td oder tr?

— TechnicalKalsa

@Singh Das Element am Index 2 der tdvon der find("td")Funktion zurückgegebenen Sammlung .

— Andreas Grech

Ich mag Option 2 mit dem Index als Referenz, meine Geige hier

— HattrickNZ

18

ein weniger jquerischer Ansatz:

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

Dies kann offensichtlich geändert werden, um mit nicht den ersten Zellen zu arbeiten.

— Jimmy
quelle

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
quelle

2

Die erste Zeile muss nicht übersprungen werden, da sie <th> und nicht <td> enthält, sodass ihre Daten nicht extrahiert werden

— Andreas Grech

7

Versuche dies,

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

1

des zweiten Elements, nicht des ersten, beginnt Gleichung um 0

— Claudiu Creanga

4

Verwenden Sie nicht die ID für diese Spalte? Sag das:

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

4

Das funktioniert

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

2

Versuche dies :

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

2

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

— Jithin
quelle

2

Ein funktionierendes Beispiel: 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
quelle