Hoe krijg ik een tabelcelwaarde met jQuery?

Ik probeer uit te zoeken hoe ik de waarde van tabelcel voor elke rij kan krijgen met behulp van jQuery.

Mijn tabel ziet er als volgt uit:

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

Ik wil eigenlijk de tabel doorlopen en de waarde van de kolom Customer Idvoor elke rij krijgen.

In de onderstaande code heb ik uitgewerkt dat ik dit moet doen om het door elke rij te laten lopen, maar ik weet niet zeker hoe ik de waarde van de eerste cel in de rij moet krijgen.

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

Antwoord 1, autoriteit 100%

Als je kunt, is het misschien de moeite waard om een ​​class-attribuut op de TD te gebruiken dat de klant-ID bevat, zodat je kunt schrijven:

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

In wezen is dit hetzelfde als de andere oplossingen (mogelijk omdat ik het heb gekopieerd en geplakt), maar heeft het voordeel dat u de structuur van uw code niet hoeft te veranderen als u door de kolommen beweegt, of zelfs de klant plaatst ID in een <span>, op voorwaarde dat u het class-attribuut daarbij behoudt.

Trouwens, ik denk dat je het in één selector zou kunnen doen:

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

Als dat het makkelijker maakt.


Antwoord 2, autoriteit 46%

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

Wat je doet is door alle trs in de tabel te gaan, de eerste td in de huidige tr in de lus te vinden en de binnenste html ervan te extraheren.

Als u een bepaalde cel wilt selecteren, kunt u ernaar verwijzen met een index:

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

In de bovenstaande code zal ik de waarde van de derde rijophalen (de index is gebaseerd op nul, dus de eerste celindex zou 0 zijn)


Hier leest u hoe u het kunt doen zonder 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;
}


Antwoord 3, autoriteit 6%

een minder-jquerish benadering:

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

dit kan uiteraard worden gewijzigd om te werken met niet-de-eerste cellen.


Antwoord 4, autoriteit 2%

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

Antwoord 5, autoriteit 2%

Probeer dit,

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

Antwoord 6

Dit werkt

$(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!";
        }
    }
});

Antwoord 7

probeer dit:

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

Antwoord 8

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

Antwoord 9

Een werkend voorbeeld:
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");
});
});

Other episodes