如何使用jQuery获取表单元格值?

I am trying to work out how to get the value of table cell for each row using jQuery.

我正在研究如何使用jQuery为每一行获取表单元格的值。

My table looks like this:

我的桌子是这样的:

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

I basically want to loop through the table, and get the value of the Customer Id column for each row.

我基本上想循环遍历这个表，并为每一行获取客户Id列的值。

In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.

在下面的代码中，我已经计算出我需要这样做才能使它在每一行中循环，但是我不确定如何获得行中第一个单元格的值。

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

10 个解决方案

#1

If you can, it might be worth using a class attribute on the TD containing the customer ID so you can write:

如果可以的话，可以在包含客户ID的TD上使用class属性，这样您就可以写:

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

Essentially this is the same as the other solutions (possibly because I copypasted), but has the advantage that you won't need to change the structure of your code if you move around the columns, or even put the customer ID into a < span >, provided you keep the class attribute with it.

本质上这是一样的其他解决方案(可能因为我copypasted),但是你的优点是不需要改变代码的结构如果你移动的列,甚至把客户ID < span >,只要你保持class属性。

By the way, I think you could do it in one selector:

顺便说一下，我认为你可以用一个选择器:

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

If that makes things easier

如果这能让事情变得更容易的话

#2

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

What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.

您要做的是遍历表中的所有trs，在循环中的当前tr中找到第一个td，并提取它的内部html。

To select a particular cell, you can reference them with an index:

要选择一个特定的单元格，您可以使用索引来引用它们:

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

In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)

在上面的代码中，我将检索第三行的值(索引是基于0的，所以第一个单元格索引将是0)

---

Here's how you can do it without jQuery:

以下是不用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;
}

​

​

#3

a less-jquerish approach:

less-jquerish方法:

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

this can obviously be changed to work with not-the-first cells.

显然，可以将其更改为与第一个单元格一起工作。

#4

Try this,

试试这个,

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

#5

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

#6

This works

这是

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

#7

Y not you use id for that column? say that:

你不是用id写那一列吗?说:

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

#8

try this :

试试这个:

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

#9

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

#10

A working example: http://jsfiddle.net/0sgLbynd/

一个工作示例: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");
});
});