Javascript 获取每个 tr 的 td 值

getting td value per tr

提问by user517406

I have code in the following style :

我有以下风格的代码：

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

I have some JQuery where I am getting the id of each row, and now I want to get each value in each td for each row. How do I do this?

我有一些 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;

回答by Aron Rotteveel

Your code does not look like jQuery. Are you sure you aren't using the term jQuery as a synonym to JavaScript? :) If that is the case, I suggest you read this questionas well; it will make things a lot more clear for you.

您的代码看起来不像 jQuery。你确定你没有使用术语 jQuery 作为 JavaScript 的同义词吗？:) 如果是这样的话，我建议你也阅读这个问题；它会让你更清楚地了解事情。

Anyway, here goes 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);
    }
}

Alternatively, if you really use jQuery:

或者，如果你真的使用 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'

回答by KARASZI István

in jQuery:

在 jQuery 中：

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

You can check it in work here: http://jsfiddle.net/3kWNh/

你可以在这里检查它的工作：http: //jsfiddle.net/3kWNh/

回答by T.J. Crowder

I want to get each value in each td for each row

我想为每一行获取每个 td 中的每个值

Do you want the value of the valueattribute, the HTML, or the HTML stripped of markup? The various answers so far have mostly gone with "the HTML", at least one went with "the HTML stripped of markup", but none (so far) has gone with "the value of the valueattribute". So:

您想要value属性的值、HTML 还是去掉标记的 HTML？到目前为止，各种答案大多与“HTML”有关，至少有一个与“去除标记的 HTML”有关，但（到目前为止）没有一个与“value属性的值”有关。所以：

Using jQuery:

使用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();
});

The end result is an object with properties for each row, with the property name being the row's idvalue, and the property value being an array of the tdinformation.

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

So for instance, to get the array for row 201461, you can do this:

例如，要获取 row 的数组201461，您可以执行以下操作：

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

The above uses:

以上用途：

• $()to find the rows in the table.
• map(followed by get) to build the array of values.
• A simple JavaScript object to hold the result. JavaScript objects are, at heart, maps (aka dictionaries, aka associative arrays, aka name/value pair collections).

• $()查找表中的行。
• map（后跟get）以构建值数组。
• 一个简单的 JavaScript 对象来保存结果。JavaScript 对象本质上是映射（又名字典，又名关联数组，又名名称/值对集合）。

---

---

Off-topic:

题外话：

• As I mentioned in a comment on the question, the HTML you've listed there is "invalid" in W3C terminology, tdelements don't have a valueattribute. You might consider using data-*attributesinstead.
• As Spudley pointed out in a comment on the question, those idvalues are likely to cause you trouble. Recommend nothaving idvalues that start with a digit. Although valid in HTML5, they're not valid in earlier versions of HTMLand not valid in CSS. Since jQuery uses CSS selectors, if you're using CSS, I would strongly advise sticking to the CSS rules. (In your case, it's really easy: Just put an don the front of them or seomthing.)

• 正如我在对该问题的评论中提到的，您在那里列出的 HTML 在 W3C 术语中是“无效的”，td元素没有value属性。您可以考虑改用data-*属性。
• 正如 Spudley 在对该问题的评论中指出的那样，这些id值可能会给您带来麻烦。建议不具有id以数字开始的值。虽然在HTML5有效的，他们是在早期版本的HTML无效，并在CSS无效。由于 jQuery 使用 CSS 选择器，如果您使用 CSS，我强烈建议您遵守 CSS 规则。（在你的情况下，这真的很简单：只需d在它们或 seomthing 前面放一个。）

回答by Nikhil

You can simply do

你可以简单地做

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

});

回答by Jason McCreary

If you want to loop over all <td>

如果你想遍历所有 <td>

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

NOTE:This is jQuery whereas your example is native JavaScript.

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

回答by Kokos

What you are using there is not jQuery, if you are using jQuery you can use .html();to retrieve the value.

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

Here is your code with jQuery:

这是您使用 jQuery 的代码：

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

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

});