Question

我有以下风格的代码：

<tr id="201461">
      <td id="0A" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 23 2008">Feb 23 2008</td>
      <td id="0B" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 25 2008">Feb 25 2008</td>
      <td id="0C" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 28 2008">Feb 28 2008</td></tr><tr id="201460">
       <td id="1A" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="47">47</td></tr>

我有一些JQuery，我获取每行的id，现在我想获得每行的每个td中的每个值。我该怎么做？

 var tbl = document.getElementById("tbl-1");

    var numRows = tbl.rows.length;

    for (var i = 1; i < numRows; i++) {

        var ID = tbl.rows[i].id;

Answer 1

您的代码看起来不像jQuery。你确定你没有使用jQuery一词作为JavaScript的同义词吗？ :)如果是这种情况，我建议你也阅读this question;它会让事情变得更加清晰。

无论如何，这里有JavaScript：

var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;

for (var i = 1; i < numRows; i++) {
    var ID = tbl.rows[i].id;
    var cells = tbl.rows[i].getElementsByTagName('td');
    for (var ic=0,it=cells.length;ic<it;ic++) {
        // alert the table cell contents
        // you probably do not want to do this, but let's just make
        // it SUPER-obvious  that it works :)
        alert(cells[ic].innerHTML);
    }
}

或者，如果你真的使用jQuery：

var table = $('#tbl-1').
var rowIds = [];
var cells = [];
$('tr', table).each(function() {
    rowIds.push($(this).attr('id'));
    $('td', $(this)).each(function() {
        cells.push($(this).html());
    });
});
// you now have all row ids stores in the array 'rowIds'
// and have all the cell contents stored in 'cells'

Answer 2

在jQuery中：

$("table#tbl-1 tr").each(function( i ) {
  $("td", this).each(function( j ) {
    console.log("".concat("row: ", i, ", col: ", j, ", value: ", $(this).text()));
  });
});

您可以在此处查看：http://jsfiddle.net/3kWNh/

Answer 3

我想获得每行的每个td中的每个值

您是否希望value属性，HTML或HTML标记的值被删除？到目前为止，各种答案主要是“HTML”，至少有一个是“HTML剥离标记”，但没有（到目前为止）已经带有“value属性的值”。所以：

使用jQuery：

var valuesByRowID = {};
$("#tbl-1 tr").each(function() {
    valuesByRowID[this.id] = $(this).find("> td").map(function() {
        // Option 1: Getting the value of the `value` attribute:
        return this.getAttribute("value"); // or return $(this).attr("value");

        // Option 2: Getting the HTML of the `td`:
        return this.innerHTML;

        // Option 3: Getting the HTML of the `td` with markup stripped:
        return $(this).text();
    }).get();
});

最终结果是一个对象，每个行都有属性，属性名称是行的id值，属性值是td信息的数组。

例如，要获取行201461的数组，您可以这样做：

var data = valuesByRowID["201461"]; // Note that property names are strings
var index;
for (index = 0; index < data.length; ++index) {
    alert(data[index]);
}

以上用途：

$()查找表格中的行。
map（后跟get）构建值数组。
用于保存结果的简单JavaScript对象。 JavaScript对象的核心是地图（也就是字典，也就是关联数组，也就是名称/值对集合）。

关闭-主题：

正如我在问题评论中提到的，您在其中列出的HTML在W3C术语td elements don't have a value attribute中是“无效的”。您可以考虑使用data-* attributes代替。

正如斯普德利在对该问题的评论中指出的那样，id值可能会给您带来麻烦。建议不具有以数字开头的id值。虽然valid in HTML5，但它们是not valid in earlier versions of HTML和not valid in CSS。由于jQuery使用CSS选择器，如果你使用CSS，我强烈建议坚持使用CSS规则。（在你的情况下，它真的很简单：只需在它们的正面放一个d或其他东西。）

Answer 4

你可以简单地做

$("td","#tbl-1").each(function(){
//access the value as
 $(this).html()

});

Answer 5

如果您想循环遍历所有<td>

$('#tbl-1 td').each(function() {
  // do stuff for each td in here...
  alert($(this).html());
})

注意：这是jQuery，而您的示例是本机JavaScript。

Answer 6

你在使用的不是jQuery，如果你使用jQuery，你可以使用.html();来检索值。

以下是jQuery的代码：

$('#tbl-1 td').each(function(){

    var ID    = $(this).attr('id');
    var value = $(this).html();

});

获得每tr的td值

6 个答案: