动态添加带有 ids 和 classes 的表行答案

【问题标题】：Dynamically adding table rows with ids and classes动态添加带有 ids 和 classes 的表行
【发布时间】：2019-06-27 14:46:34
【问题描述】：

我有一个只有一行的表格我有一个函数可以在按下按钮时添加一个表格行。但是，添加的新行与第一行（我需要）没有相同的 id。我从 Stack Overflow 获得的添加表格行的脚本，但是我是 jQuery 新手，我有点卡住了。

我可以看到 td contenteditable 被附加到表行。但是，如果我在其中添加了一个 ID，所以它是 td id='task'，那么该行上的每个单元格都有该 ID。

这是添加表格行和td的函数

$("#project-table").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td contenteditable="true"></td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });

这是我要复制的表格行（每个 td 的 id 完整）：

<tr>
    <td id="task_name" contenteditable="true"></td>
    <td id="brief" contenteditable="true"></td>
    <td id="assigned_to" contenteditable="true"></td>
    <td id="hours_to_complete" contenteditable="true"></td>
    <td id="status" contenteditable="true"></td>
</tr>

所以总而言之，我希望我的添加表格行函数添加具有相同 ID 的单元格数量相同的行。

【问题讨论】：

ID 在您的 html 代码中必须是唯一的。如果您需要这些 ID 来选择表格单元格，请使用类
我正在使用 id 值并将它们设置为 ajax 数据的键，因此它们需要与在我的 php 脚本的另一部分中使用的相同。现在一切正常！
不，它正在工作，因为浏览器很好。请改用data- 属性，例如<td data-id='task_name'，然后它可以重复。 ID 在文档中必须是唯一的（只是浏览器不会始终强制执行此操作 - 您的浏览器不会，其他人可能会这样做）。
我知道它可以工作，但实际上它的工作很糟糕！我会做一些家庭作业。谢谢。
所以在下面的回答中，我应该从 id 更改为 data- 并相应地调整我的 ajax。非常感谢。出于好奇，如果我保持原样，会有什么负面影响？

标签： jquery html

【解决方案1】：

我想出了答案，通过从选择器的每个部分中删除“td”，我可以指定 id：

jQuery.each($('tr:last', this), function () {
        tds += '<td id='task_name' contenteditable="true"></td>';
        tds += '<td id='brief' contenteditable="true"></td>';
        tds += '<td id='assigned_to' contenteditable="true"></td>';
        tds += '<td id='hours_to_complete' contenteditable="true"></td>';
        tds += '<td id='status' contenteditable="true"></td>';
});

【讨论】：