javascript 如何遍历 tbody 中的 td？

How to iterate through td in a tbody?

提问by NOOB_USER

<table> 
    <tbody id="SAMPLETBODY">
        <tr>
            <td>TEST1</td>
            <td>TEST2</td>
            <td>TEST3</td>
            <td>TEST4</td>
        </tr>
    </tbody>
</table>

I have the code above, I want to iterate through the td's, since iterating through tbodies in a table is like this:

我有上面的代码，我想遍历 td，因为遍历表中的 tbodies 是这样的：

var table1 = document.getElementById('firstTable');
for(int i = 0; i < table1.tBodies.length; i++) {
    /*DO SOMETHING HERE*/
}

How can I do it in td inside tbodies?

我怎样才能在 tbodies 内的 td 中做到这一点？

EDIT:

编辑：

I have multiple tbodies in the table, I have already tried some codes that is similar (It iterated through all tbodies) and posted here before I asked the question.

我在表中有多个 tbodies，我已经尝试了一些类似的代码（它遍历所有 tbodies）并在我提出问题之前张贴在这里。

EDIT AGAIN:

再次编辑：

final code:

最终代码：

function sampleFunc() {
    var x = "";
    var tds = document.querySelectorAll('#SAMPLETBODY td'), i;
    for(i = 0; i < tds.length; ++i) {
        x = x + tds[i].innerHTML;
    }
    return x;
}

thanks to:rink.attendant.6

感谢：rink.attendant.6

回答by rink.attendant.6

Use querySelectorAll():

使用querySelectorAll()：

var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; ++i) {
    // do something here
}

If you wish to restrict it to a certain table, for instance, #firstTable, you will need to specify that:

如果您希望将其限制为某个表，例如 ，#firstTable则需要指定：

var tds = document.querySelectorAll('#firstTable tbody td');

Just noticed that you have an ID on your tbody, so the selector would look like this for your specific tbody:

刚刚注意到您的 上有一个 ID tbody，因此对于您的特定选择器将如下所示tbody：

var tds = document.querySelectorAll('#SAMPLETBODY td');

回答by Felix Kling

Using getElementsByTagName('td')or querySelectorAllis the most reasonable approach, but since you already know about tbodies, it might be interesting for you to learn about rowsand cellsas well.

使用getElementsByTagName('td')或querySelectorAll是最合理的方法，但由于您已经了解tbodies，因此了解rows或对您来说可能也很有趣cells。

A tbodyelement has a property rows, which is a collection of trelements, i.e. the rows it contains (not surprising, right?). Each trelement in return as a property cells, which is a collection of tdelements (no surprise here either).

一个tbody元素有一个属性rows，它是tr元素的集合，即它包含的行（这并不奇怪，对吧？）。每个tr元素作为一个属性返回cells，它是一个td元素的集合（这里也不奇怪）。

So technicallyyou could do

所以从技术上讲你可以做到

for(var i = 0; i < table1.tBodies.length; i++) {
  var tbody =  table1.tBodies[i];
  for (var j = 0; j < tbody.rows.length; j++) {
    var row = tbody.rows[j];
    for (var k = 0; k < row.cells.length; k++) {
      var cell = row.cells[k];
      // ...
    }
  }
}

But such a nested for loop is hard to read and maintain. The other answers show much better solutions.

但是这样一个嵌套的 for 循环很难阅读和维护。其他答案显示了更好的解决方案。

You can learn about the properties of tbody, trand tdin the MDN documentation.

您可以在 MDN 文档中了解tbody,tr和的属性td。

回答by Ja?ck

You can use the humble getElementsByTagName():

您可以使用不起眼的 getElementsByTagName()：

var tbody = document.getElementById('SAMPLETBODY'),
cells = tbody.getElementsByTagName('td');

for (var k = 0; k < cells.length; ++k) {
    // do stuff with cells[k];
}

回答by Praveen

var table1 = document.getElementById('firstTable');

Here it returns table with id firstTable

这里它返回带有 id firstTable 的表

Then using that get all tdwithin the table1 like

然后使用它td在 table1中获取所有内容，例如

var tds = table1.getElementsByTagName('td');

Now you can iterate over each td like

现在你可以迭代每个 td 就像

for (i = 0; i < tds.length; i++) {
    console.log(tds[i])
}

JSFiddle

JSFiddle

回答by Arjit

Try this..

试试这个..

$("td", firstTable).each(function() {...}

With javascript only. Try this... Edit:

仅使用 javascript。试试这个... 编辑：

            var table = document.getElementById('SAMPLETBODY'),
            cells = table.getElementsByTagName('td');

            for (var k = 0; k < cells.length; ++k) {
                // do stuff with cells[k];
                alert(cells[k].innerHTML);
            }

回答by Farkhat Mikhalko

You can use this for example:

例如，您可以使用它：

var tbody = document.getElementsByTagName("tbody")[0];
var tds = tbody.getElementsByTagName("td");

for(var node in tds){
    console.log(tds[node])
}

There are different methods to do this things, you can use document.getElementById (if you have table or tbody with id), document.getElementsByClassName in case when table or tbody have class name etc.

有不同的方法来做这件事，你可以使用 document.getElementById（如果你有带 id 的 table 或 tbody），document.getElementsByClassName 以防 table 或 tbody 有类名等。

Demo

演示

回答by Smoke

give a id for your table and use javascript for this

为您的表提供一个 id 并为此使用 javascript

<table id="table_id" >
<script>
var e1 = document.getElementById('table_id');
for(int i = 0; i < e1.tBodies.length; i++) {

}
</script>
</table>

回答by rajesh kakawat

try something like this

尝试这样的事情

var table1 = document.getElementById('SAMPLETBODY');
var tds = table1.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
    alert(tds[i].innerHTML);
}

回答by dfsq

Iterate over rowsan cellsarrays:

遍历rows一个cells阵列：

var table1 = document.getElementById('firstTable');

for (var i = 0; i < table1.tBodies.length; i++) {

    var rows = table1.tBodies[i].rows;
    for (var j = 0; j < rows.length; j++) {

        var cells = rows[j].cells;
        for (var k = 0; k < cells.length; k++) {
            console.log(cells[k]);
        }
    }
}

http://jsfiddle.net/dfsq/6Xbre/

http://jsfiddle.net/dfsq/6Xbre/