如何通过 javascript 中的“getElementById”获取动态 id答案

【问题标题】：How to get a dynamic id via 'getElementById' in javascript如何通过 javascript 中的“getElementById”获取动态 id
【发布时间】：2017-12-05 12:06:51
【问题描述】：

首先，我在 StackOverflow 中遇到了最类似的问题，但没有任何相关的问题。

我有一个为每个 td 动态创建 id 的表。（例如：td 的 id 为“0 0”）

我需要使用 id 访问那个特定的 td。我尝试了以下代码：

document.getElementById("\""+rowID + " " + 0 + "\"");

这会抛出“null”。 “rowID”也是动态定义的。

当我尝试以下操作时：

document.getElementById("0 0");

我正确得到以下输出：

<td class="cell" id="0 0">20</td>

感谢任何帮助。

【问题讨论】：

标识符中不允许有空格
document.getElementById(rowID +" "+0); 或 document.getElementById('"' +rowID + '0"');
如果您需要指定动态标识符，请尝试使用 GUID。但是，如果您确实需要跟踪列和行，我建议将它们分开，因为它们的意图与元素标识符的意图不同。即：对于第 1 行 <td class="cell" data-row-id="1" data-col-id="2">20</td> 中的第 2 列，您仍然可以通过 document.querySelector('[data-row-id="1"][data-col-id="2"]') 查询元素您甚至可以仅将 col-id 分配给 td 和 row-id 分配给 tr 元素如果需要，取决于所需的功能。
弗兰。这听起来很有趣而且很干燥。但是我如何将这些类动态定义为一个动态创建的 td 呢？在我当前的代码中，我遵循这个：cell.setAttribute("id", rowID + "_" + j);
我不知道您使用什么来生成行/列，但我从您的示例中假设，例如：cell.setAttribute("data-row-id", rowID); 和cell.setAttribute("data-col-id", j);，如果您想将其分开，也许@ 987654334@和cell.setAttribute("data-col-id", j);

标签： javascript jquery dynamic-programming getelementbyid

【解决方案1】：

这归结为：如何在 JavaScript 中进行字符串连接？

document.getElementById(rowID + " 0");
// or if we assume a `colID` variable:
document.getElementById(rowID + " " + colID);

但是，请注意，您几乎违反了id 属性的唯一规则：它cannot contain a space。某些浏览器可能会让您侥幸获得该空间（事实上，Chrome、Firefox 和 IE11 都可以），但明确不允许这样做。

在id 属性和您的代码中将空格替换为（例如）下划线 (_) 或 x。例如，0x0。（ids 可以以数字开头，尽管人们会告诉您他们不能，因为 CSS ID selector 不能以 未转义 数字开头。）

【讨论】：

或者取一个有意义的id，比如'row0col0'。
@NinaScholz：当然，或者0x0，因为这是一种相当常见的表达row+col的方式。