得到每tr的td值

getting td value per tr

本文关键字:td tr      更新时间:2023-09-26

我有以下样式的代码:

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

您的代码看起来不像jQuery。你确定你没有使用术语jQuery作为JavaScript的同义词吗?如果是这样的话,我建议你也看看这个问题;这会让你更清楚。

不管怎样,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'

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/

我想获得每个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元素没有value属性。你可以考虑使用data-*属性。
  • 正如Spudley在对这个问题的评论中指出的那样,这些id值可能会给你带来麻烦。建议而不是id值以数字开头。虽然在HTML5中有效,但在早期版本的HTML和CSS中无效。由于jQuery使用CSS选择器,如果您正在使用CSS,我强烈建议您遵守CSS规则。(在你的情况下,这真的很容易:只要在他们的前面放一个d或其他东西。)

你可以直接做

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

您使用的不是jQuery,如果您使用jQuery,您可以使用.html();来检索值

下面是你的jQuery代码:
$('#tbl-1 td').each(function(){
    var ID    = $(this).attr('id');
    var value = $(this).html();
});

如果你想遍历所有的<td>

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

注意:这是jQuery,而你的例子是原生JavaScript。