将表格数据作为文本框在html中动态添加行

Question

我有一个表，其中有两个列 PartNumber 和 Quantity 作为列标题。每行都是一个可编辑的文本框，具有特定的 ID，用于通过网络发送数据。表结构如下

<tr>
<th>Part Number</th>
<th>Quantity</th>
</tr>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="number" id="q1"></td>
</tr>
<tr>
<td><input type="text" id="t2"></td>
<td><input type="number" id="q2"></td>
</tr>
--
--
--
<tr>
<td><input type="text" id="t5"></td>
<td><input type="number" id="q5"></td>
</tr>

点击按钮后，我必须将数据发送到网络服务以进行进一步处理。

我的新任务是在点击添加按钮时动态添加行。添加带有文本框的行不是问题。问题在于为每个字段分配 ID。即.. 下一行的 ID 应该是 't6' 和 'q6' 我该怎么做

Answer 1

您只需要将行号附加到每个字段的id 属性。

这是您需要在粗略代码中遵循的过程：

var rowNumber = $('table tr').length + 1;
$('#newRow input').attr('id', 't' + rowNumber);
$('#newRow').appendTo('table');