Question

我有一张这样的表

<table id="user-data">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contact Number</th>
    </tr>
</table>

现在，名称，电子邮件和联系人号码等字段的所有字段都是从数据库中填充的。在此之前，我只获得了一行内容。所以我像这样制作了我的剧本

<script type="text/javascript">
    var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"contact-number\"></td></tr>');
    $('table#user-data').append(html);
</script>

这是在表中添加单行没有任何问题。但现在我想一次添加更多单行，行号每次都会改变。那么有人能告诉我如何动态地向表中添加给定的行数吗？任何帮助和建议都将非常适合。感谢

更新我得到了jQuery中的行数。可以说它是一个名为Length的变量。

Answer 1

正如您所提到的，假设您有一个名为length的变量中的记录数。

您可以按如下方式添加许多行：

var html;
for(i=0; i<length; i++){
   html += '<tr><td><input type="text" name="name"></td><td><input type="text" name="email"></td><td><input type="text" name="contact-number"></td></tr>';
}
$('table#user-data').append(html);

附注：

如果可能的话，避免在循环内部DOM进行操作是一种很好的做法。您可以连接HTML并在这种情况下一次性附加所有内容。
只要您在字符串

Answer 2

您可以将当前代码包装在for循环中，该循环会为您迭代的每条记录向表中附加一个新行。

for(i=0; i<data.length; i++){
    var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"contact-number\"></td></tr>');
    $('table#user-data').append(html);
}

然后，您可以使用i+1作为行号的值

jQuery动态地向表中添加行数？

2 个答案: