从 HTML 中的动态表中获取单元格值答案

【问题标题】：get cell value from a dynamic table in HTML从 HTML 中的动态表中获取单元格值
【发布时间】：2011-04-22 16:29:24
【问题描述】：

我使用 Javascript 将新行动态添加到 html 表中，然后我使用了：

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
queue.innerHTML +=table.rows[rowCount].cells[1].firstChild.nodeValue + "/" +  table.rows[rowCount].cells[2].firstChild.nodeValue +"\n";

但它只返回null，因此我想知道我们能否从动态添加的行中的单元格中获取值以及如何获取？谢谢。

【问题讨论】：

1)队列从何而来？ 2）rowCount 是行数+1，所以你的逻辑不能真正正确地抓取一些东西。 3）我们需要知道你的html结构。 4)JavaScript 不关心节点是否是动态创建的。它只关心它们在代码执行时是否存在。见jsfiddle.net/9pL23

标签： javascript dom

【解决方案1】：

我认为 nodeValue 不适合使用。根据this，元素的 nodeValue 始终为空。

如果您正在动态创建表格行，将其同时添加到 queue.innerHTML 中而不是这样做不是更有意义吗？

【讨论】：

【解决方案2】：

我认为rows 集合是一个基于零的数组结构。所以尝试使用rowCount-1:

queue.innerHTML += table.rows[rowCount-1].cells[1].firstChild.nodeValue 
                   + "/" +  
                   table.rows[rowCount-1].cells[2].firstChild.nodeValue +"\n";

此外，您可以使用innerText，如table.rows[rowCount-1].cells[1].innerText 来获取单元格值

[edit] 跳过 rowCount 部分：您在添加之前分配它，所以 rowCount 应该可以工作。不过，您应该阅读 this，因为表的 innerHTML 并不总是能提供所需的结果。

【讨论】：

【解决方案3】：

如果我正确理解您的问题，这就是我使用 jQuery 的方法。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
  var $lastRow = $('table tr:last');
  queue.innerHTML += $lastRow.find('td:eq(1)') + '/' + $lastRow.find('td:eq(2)')
</script>

或者:eq(0) 和:eq(1)，如果你想要第一个和第二个单元格。

【讨论】：

他没有要求 jQuery。为什么现在每个人都强制使用 jQuery？您不需要 Sizzle 来选择 DOM 元素。
我知道。但我想我会建议它，因为它对于 JS 新手来说要容易得多。还有其他人。
这并不是真正的建议，因为它是“这就是你的做法”。我不明白使用 jQuery 比使用 document.getElementById 更容易；后者速度快了无数倍，并且可以自我记录。如果你担心跨浏览器的兼容性，我敢肯定他不会关心 Netscape 1。