将id（1,2，...等）分配给动态html表

Question

尝试在链接图片中实现功能。

当用户点击添加按钮时，表格会增长。我正在尝试将新添加的td的第一列内的文本替换为表的长度。我是jQuery的新手，不知道该怎么做。任何帮助都会很棒。

Answer 1

使用您的代码更容易回答您，但您可以通过$('#yourTBodyID > tr').length了解添加的行号

看一下这段代码：

<强> HTML

<table>
  <thead>
    <tr>
      <th>Zone ID</th>
      <th>Zone Description</th>
      <th><button onclick="addRow();">Add Row</button></th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

JS ：

function addRow() {
    var rowNum = $('#tableBody > tr').length + 1;
  $('#tableBody').append('<tr>'
        + '<td>' + rowNum + '</td>'
      + '<td><input type="text"/></td>'
      + '<td><button>Disable</button></td>'
  );
}

jsFiddle

希望它有所帮助;）

Answer 2

您将面临更多问题，而不仅仅是在最近创建的tr上显示该数字。由于您没有记下任何代码，我注意到您在开发的哪个阶段，或者您已经创建了哪些功能。我将简要地尝试解释如何实现它，只是向您展示道路。

1. 添加按钮应在DOM中找到有效的<tr>到.clone()。它可能是一个＆＃34;看到的tr＆＃34;或模板一。在第一种情况下，您应该清理输入中的信息。
2. 将克隆节点保存到变量后，应准备插入。
   • 计算<tr>行（如果您有类名，则会有帮助）并使用.length()将<td>分配给第一个.text()
   • 更改第二个<td>标记内输入的名称属性。否则，当表单发送到服务器时，您将丢弃与最后一个之前相同名称的所有输入。
3. 在最后一个<td>标记上，您有一个禁用按钮。它不会对您的全新元素进行任何附加活动。您可以在此处附加，或者如果您愿意，可以使用$('table').on('click','.disable-button',function(e){})之类的内容在一开始添加事件。这样做而不是$(.disable-button).click()将确保在DOM .ready()启动后创建此类的元素将获得此事件。

我希望它能帮到你