使用 JavaScript 为表行中的按钮动态分配 ID

了解 JavaScript 表中按钮的动态 ID 生成

当使用 JavaScript 动态生成表格和按钮等 HTML 元素时，为这些元素分配唯一的 ID 可能是一个挑战。当表中的每一行都需要一个唯一的按钮来进行单独的交互时，这一点尤其重要。开发人员在尝试在应用程序中分配动态 ID 时经常遇到问题 内部HTML 一个细胞的。

在本例中，目标是从 JSON 对象构建表行，并为每行中的按钮动态分配唯一 ID。然而，使用模板文字的常见方法 内部HTML 可能无法按预期工作。当稍后在脚本中尝试引用这些按钮或与这些按钮交互时，这可能会导致问题。

问题出在 JavaScript 的处理方式上 内部HTML 和模板文字。如果没有正确的方法，按钮的 ID 将显示不正确或无法动态更新，从而无法针对特定行进行操作。这是动态表生成中的常见陷阱。

在本文中，我们将探讨如何解决此问题，方法是使用确保每行的按钮 ID 唯一的方法，将动态 ID 正确分配给表格单元格内的按钮。我们还将提供一个可行的解决方案，您可以将其应用到您自己的项目中。

JavaScript 中的动态表行和按钮 ID 生成

在动态前端开发中，为HTML元素生成唯一的ID对于处理用户交互通常至关重要，特别是在需要区分多个按钮或输入字段的场景中。上面讨论的脚本演示了如何动态创建表行和按钮，为每个按钮分配一个与其在表中的行相对应的唯一 ID。通过使用 JavaScript 循环和字符串连接，我们可以确保每个按钮都有唯一的标识符，例如“testbutton0”、“testbutton1”等。这样可以轻松识别触发特定事件的按钮，使其成为动态内容生成的实用方法。

本例中使用的核心函数之一是 表.insertRow()，它将新行插入到预先存在的 HTML 表中。对于循环的每次迭代，都会向表中添加一个新行，并在该行中创建两个单元格：一个用于员工姓名，另一个用于按钮。第二个单元使用 内部HTML 插入按钮及其动态生成的 ID。然而，使用 内部HTML 创建元素有其局限性，特别是在引用按钮 ID 等变量时，如果处理不当会导致错误。

第二个解决方案中演示的更可靠的方法使用 文档.createElement() 直接通过 JavaScript 创建 HTML 元素。此方法可以更好地控制元素的创建，并允许更安全、更模块化的代码。通过以编程方式创建按钮并通过 JavaScript 动态分配 ID，该解决方案避免了由以下原因引起的潜在问题： 内部HTML 并提供更干净、更安全的内容生成方式。此外，它还可以更轻松地使用以下命令将事件侦听器直接添加到按钮 添加事件监听器()，这有助于避免内联事件处理程序。

最后，包括 事件.目标.id 对于识别单击了哪个按钮至关重要。此事件属性捕获触发事件的元素的 ID，从而允许精确控制交互。例如，当单击按钮时， doSmth() 函数会提醒按钮的 ID，这有助于确保根据单击的特定按钮采取正确的操作。这种技术的组合（动态行创建、唯一 ID 分配和事件处理）使其成为在前端构建交互式数据驱动表的强大解决方案。

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

增强 JavaScript 表中的动态 ID 生成和交互

使用 JavaScript 动态生成表格内容时经常被忽视的一个方面是可扩展性和可维护性的潜力。随着表行数的增加，性能可能会受到影响，尤其是在不断更新或重建 DOM 的情况下。为了优化性能，您可以通过首先使用文档片段在内存中构建整个表结构，然后将其附加到 DOM 来减少直接 DOM 操作的数量。这可以最大限度地减少回流和重绘过程，从而减慢大规模应用程序的速度。

动态表生成中的另一个关键要素是如何处理事件委托。虽然向每个按钮添加单独的事件侦听器对于较小的表来说效果很好，但它可能会导致较大数据集的性能问题。相反，使用事件委托允许您侦听父元素（如表格）上的事件并更有效地处理按钮单击。这样，您只需将一个事件侦听器附加到表，并且根据单击的元素的 ID，您可以确定要采取的适当操作。

最后，可及性是另一个不容忽视的因素。动态生成按钮或其他交互元素时，必须确保所有用户（包括使用辅助技术的用户）都可以访问每个元素。通过添加适当的 咏叹调标签 或者 角色 按钮，可以提供更具包容性的用户体验。此外，使用屏幕阅读器或键盘导航测试您的表格可以帮助发现元素如何在更动态、更易于访问的 Web 应用程序中交互的任何问题。