Question

我想在html文件中使用jQuery 1.3.2并创建动态表。为此，我创建第一行，然后创建一个运行10次的for循环，在每次迭代中，我选择表的最后一行并使用after()在其后添加新行。这个新行包含my循环计数器的值。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">

    $("document").ready(function() {
        for (var i = 0; i < 11; i += 1) {
            var newItem = $("<tr><td>"i"</td></tr>");
            $("#table1 tr:last").after(newItem.html());
        }
    });

</script>

</head>
<body>
<table id="table1">
    <tr>
    <td>row 1 col 1</td>
    </tr>
</table>
</body>
</html>

问题是，只显示在<table></table>中创建的第一行。请帮忙。

Answer 1

$("#table1 tr:last")

选择最后一行。与

相比，它在处理方面要贵一些

$("#table1")

只选择整个表格。

$("#table1 tr:last").after(...)

再次昂贵，因为在你选择了最后一行之后，你退后一步，回到tr：last的父级并尝试追加一些东西。

为什么不尝试将表行作为表的子项附加呢？

var row = $("<tr><td>"i"</td></tr>");
$("#table1").append(row);

追加将始终添加到table1的子节点的末尾。这应该更快。请查看jQuery文档中的append。

Answer 2

for (var i = 0; i < 11; i += 1) {
    $("#table1").append("<tr><td>" + i + "</td></tr>");
}

这是my code

Answer 3

尝试这种方式：

var newItem = "<tr><td>" + i + "</td></tr>"; 
$("#table1 tr:last").after(newItem);

使用jQuery中的for循环动态地向表添加行

3 个答案: