时间戳

首页 > 解决方案 > 动态添加带有 ids 和 classes 的表行

jquery - 动态添加带有 ids 和 classes 的表行

问题描述

我有一个只有一行的表格 我有一个在按下按钮时添加表格行的功能。但是，添加的新行与第一行（我需要）没有相同的 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 的单元格数量相同的行。

标签： jqueryhtml

解决方案

我想出了答案，通过从选择器的每个部分中删除“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>';
});

推荐阅读