Question

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

我有上面的代码，我想迭代td＆＃39; s，因为迭代表中的tbodies是这样的：

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

我怎样才能在td体内进行td？

编辑：

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

再次编辑：

最终代码：

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

感谢：rink.attendant.6

Answer 1

使用querySelectorAll()：

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

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

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

注意到您的tbody上有一个ID，因此选择器对于您的特定tbody看起来像这样：

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

Answer 2

为您的表格提供ID并使用javascript进行此操作

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

}
</script>
</table>

Answer 3

使用getElementsByTagName('td')或querySelectorAll是最合理的方法，但由于您已经了解tbodies，因此了解rows和{{}可能会很有趣1}}。

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

所以技术上你可以做到

td

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

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

Answer 4

您可以使用简单的getElementsByTagName（）：

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

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

Answer 5

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

这里返回id为firstTable

的表

然后使用它获取table1中的所有td，如

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

现在你可以迭代每个td，如

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

JSFiddle

Answer 6

试试这个..

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

仅限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);
            }

Answer 7

您可以使用它，例如：

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

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

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

Demo

Answer 8

尝试这样的事情

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

Answer 9

迭代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/

如何在tbody中迭代td？

9 个答案: