使用 id 属性将 <td> 元素的内容映射到数组答案

【问题标题】：Mapping contents of <td> elements to array using id attribute使用 id 属性将 <td> 元素的内容映射到数组
【发布时间】：2014-02-16 19:38:03
【问题描述】：

我正在尝试将表中的元素映射到数组的元素，以便用户可以编辑内容，查看表中的结果 - 并且数组已更新。我想使用简单的 array[row][col] 符号来访问数组。所以我为从 id="0-0" 到 id="99-9" 的每个元素分配了 id。我正在使用如下代码：

r=0;c=4;
rowStr+= "<td id='"+r+"-"+c+"'></td>";
// HTML shows: <td id="0-4" </td> etc.

这很好用。我可以在创建它们时将 id 记录到我的控制台，当我在调试器中检查 HTML 时，它们会显示在页面中，如上面的评论所示。

但无论我做什么，我都无法使用 id 访问/编辑单元格内容。我试过 jQuery：

var idStr="#id"+r+"-"+c; $(idStr).text("content");

。 .和 HTML Dom 方法：

document.getElementById("0-4").innerHTML="content";

在这两种情况下，代码都会停止并且我得到调试器错误：

Uncaught Error: Syntax error, unrecognized expression: '#0-4'

提前感谢任何可以告诉我这里发生了什么的人。

【问题讨论】：

【解决方案1】：

我建议使用原生 HTMLTable API。它允许您通过索引引用表格单元格和行。例如，您可以访问第三行的第二个 TD 元素为

table.rows[2].cells[1].innerHTML = 'New content'; // index starts from 0

在这种情况下，您不需要一堆 id。

您甚至可以创建一个非常简单的辅助函数来通过索引选择 TD：

function getCell(row, cell) {
    return tableElement.rows[row].cells[cell];
}

getCell(2, 3).innerHTML = 'Cell 4 in third row';

【讨论】：

我使用您在此处提供的建议重新编写了代码，现在我可以访问该表。此外，我不必为元素分配 id。我怀疑这会更快，因为不需要调用任何 jQuery 函数。令我惊讶的是，我从未在我运行的任何搜索中看到这种方法。感谢您向我展示了这项重要的技术。我不确定如果我“接受”一个答案意味着什么，但我看到有些人明确地这样做了。所以，是的，我接受这个很好的答案。
@Banjobum 要“接受”一个答案，您可以单击它旁边的复选标记。这向将来遇到您的问题的任何人表明，此答案可以帮助您解决问题。它还会将此答案置于答案列表的顶部，以便人们更快地找到它。
谢谢阿萨德！我在某个地方找了一个按钮。并感谢您的建议。它有帮助。