如何遍历tbody中的td？

Question

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

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

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

如何在tbodies中的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

- NOOB_USER

---

为什么要在这么简单的事情上使用jQuery？ - sevenseacat

@sevenseacat

1. 可能在页面的其他地方使用
2. 可以用一行代码写出

- Ed Heal

Answer 1

使用querySelectorAll()方法：

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

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

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

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

我注意到您的有一个ID，因此针对您特定的选择器应该是这样的：

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

- rink.attendant.6

---

他没有使用 jQuery。 - Karthick Kumar

querySelectorAll() 是一个 JavaScript 函数，适用于 IE 8+ 和其他浏览器。 - rink.attendant.6

Answer 2

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

这里返回id为firstTable的表格

然后使用该表格获取所有table1中的，如下：

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

现在您可以像这样迭代每个td：

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

JSFiddle

- Praveen

---

如果表格中有tfoot怎么办？ - Suraj Shrestha

Answer 3

使用 getElementsByTagName('td') 或 querySelectorAll 是最合理的方法，但由于您已经了解了 tbodies，了解 rows 和 cells 也可能会很有趣。 tbody 元素有一个属性 rows，它是包含的 tr 元素（不意外，对吧？）的集合。每个 tr 元素又有一个属性 cells，它是包含的 td 元素（这里也不意外）的集合。

因此，从技术上讲，您可以这样做：

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];
      // ...
    }
  }
}

但是这样的嵌套for循环很难阅读和维护。其他答案展示了更好的解决方案。 您可以在MDN文档中了解tbody、tr和td的属性。

- Felix Kling

---

我一直在尝试使用 :not 选择器和 querySelectorAll 结合使用，类似于以下代码：var table1 = document.getElementById('firstTable'); var tds = table1.querySelectorAll('td:not(tfoot td)'); 但是我找不到实现的方法。您能否分享一下您对这种方法的看法（可行/不可行）？ - Praveen

@Praveen：与jQuery不同，CSS的:not选择器只接受"简单选择器"，例如类型、类、ID、属性，而不是表达节点之间关系（后代、子元素、兄弟元素）的选择器。因此，你需要使用querySelectorAll('tbody td')来替代。 - Felix Kling

Answer 4

遍历 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/

- dfsq

Answer 5

你可以使用谦逊的getElementsByTagName()：

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

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

- Ja͢ck

---

这将找到所有的TD，而不仅仅是在tbody内部。 - SajithNair

@SajithNair除了tbody内部，你还能在哪里找到td呢？ - Ja͢ck

tfoot 也一样简单易调整。 - Felix Kling

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

- Arjit

---

他没有使用jQuery。 - Barmar

什么是 $？它不是 JavaScript 的原生函数。 - Felix Kling

Answer 7

你可以举例如下所示：

这是一个例子

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

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

有不同的方法来完成这件事，您可以使用document.getElementById（如果您拥有带有id的表格或tbody），document.getElementsByClassName（如果表格或tbody具有类名）等。

演示

- Farkhat Mikhalko

---

如果表格中有一个 tfoot 怎么办？ - Suraj Shrestha

Answer 8

为您的表格分配一个ID，然后使用JavaScript实现此功能。

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

}
</script>
</table>

- Smoke

---

这是在桌子外面。我要给你提示。 - Smoke

Answer 9

尝试类似这样的东西。

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

- rajesh kakawat