遍历div中的表格及其元素？

Question

如果我有一个包含N个表元素和Y个id为eye-d的div的

res

，我该如何迭代每个表并获取其内部eye-d.innerHTML的值？

注意：eye-d是唯一的。在1个eye-d中有许多表。 eye-d的示例：

<div id=​"eye-d">​
  <table border=​"0" cellpadding=​"2" cellspacing=​"1" class=​"list">​
    <tbody>​
      <tr class=​"table_text">​…​</tr>​
        <tr>​
         <td class=​"odd">​…​</td>​
         <td class=​"odd">​ABC</td>​
         <td class=​"odd">​N/A​</td>​
        </tr>​
    </tbody>​
  </table>​
</div>

按照要求重新表述...

我有一个id为eye-d的div，然后我有很多个表格...每个表格都有许多class为odd的div。我想要在eye-d中获取每个表格内odd的innerHTML。

- Skizit

---

请提供一些HTML代码示例。ID里的“eye-d”是字面意思吗？ID必须是唯一的。 - Felix Kling

抱歉，我不小心漏掉了。现在已经加上了！ - Skizit

我有点困惑。这些 div 现在是否包含在一个表格中，该表格包含在 res div 中？ - Felix Kling

Answer 1

你的id不是唯一的。

不能有多个id为"eye-d"的<div>。

id必须是唯一的，而name属性不必是唯一的。你可能想使用类。

<div class="eye-d"> ... </div>

[[编辑]]

这些div的选择器非常简单：$("#eye-d table .odd")（使用jQuery）

如果必须使用原生JS，则可以：

var div = document.getElementById("eye-d");
var tables = [];
recurse(res.childNodes, function(el) {
    if (el.nodeName.toLowerCase() === "table") {
        tables.push(el);
    }
});
// array of innerHTML of odd divs.
var oddDivs = [];
for (var i = 0, ii = tables.length; i < ii; i++) {
    recurse(tables[i].childNodes, function(el) {
        if (el.className.indexOf("odd") > 0) {
            oddDivs.push(el.innerHTML);
        }
    });
}

function recurse(nodeList, do) {
    for (var i = 0, ii = nodeList.length; i < ii; i++) {
        do(nodeList[i]);
        if (nodeList[i].childNodes.length > 0) {
            recurse(nodeList[i].childNodes, do);
        }
    }
}

Recurse（递归）会遍历节点树，并对它找到的每个元素调用do函数。然后，您可以搜索任何您想要的内容。

- Raynos

---

只是说，如果你使用它，至少应该提及并链接它。如果我知道真正的结构，我可以用普通JS编写它 ;) - Felix Kling

eye-d是一个独特的div。没有其他的eye-d。eye-d包含许多表格。 - Skizit

@Skizit 你想获取什么？所有表格的innerHTML吗？ @FelixKling 看看那个原始JS是如何燃烧的:(它燃烧了。 - Raynos

@Skizit：我认为你需要重新表达你的第一句话。它看起来像是你有一个包含许多表格的div，每个表格都包含许多具有此ID的div。 - Felix Kling

@Skizit 它会返回 #eye-d 中每个表格中的所有奇数。 - Raynos

Answer 2

如果有 Y 个 div，而且你所说的 eye-d 意味着以 eye- 开头后面跟着一个数字，那么只需要这样简单的代码：while (Y--) document.getElementById('eye-'+Y).innerHTML=...

- Eli Grey

Answer 3

据我理解，您有以下内容：
1. 一个ID为eye-d的div。
2. 这个div里面有几个表格。
3. 您想获取每个表格并查看其innerHTML。

var allTables = document.getElementById('eye-d').getElementsByTagName('table');  
for(i in allTables){ alert(allTables[i].innerHTML); }

- Gary

---

使用此for循环以防止超出匹配范围： for (var i = 0; i < allTables.length; i++) { - Loren