Динамическое добавление строк в таблицу с помощью цикла for в jQuery - PullRequest
Новая
       21

Динамическое добавление строк в таблицу с помощью цикла for в jQuery

1 голос
/ 04 февраля 2012

Я хочу использовать jQuery 1.3.2 в html-файле и создать динамическую таблицу.Для этого я создаю первую строку, затем создаю цикл for, который выполняется 10 раз, и на каждой итерации я выбираю последнюю строку таблицы и использую after(), чтобы добавить новую строку после нее.Эта новая строка содержит значение счетчика моего цикла for.

код: 

<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>.Пожалуйста, помогите.

Ответы [ 3 ]

5 голосов
/ 04 февраля 2012 
$("#table1 tr:last")

выбирает последнюю строку.Это немного дороже с точки зрения необходимой обработки по сравнению с 

$("#table1")

, который выбирает только всю таблицу. 

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

снова дорого, поскольку после выбора последней строкисделайте один шаг назад, вернитесь к родителю tr: last и попробуйте добавить что-нибудь.

Почему бы не попробовать добавить строки таблицы как дочерние элементы таблицы, как это?всегда добавляйте в конце потомков таблицы1.Это должно быть быстрее.Взгляните на append в документации по jQuery.

3 голосов
/ 04 февраля 2012 
for (var i = 0; i < 11; i += 1) {
    $("#table1").append("<tr><td>" + i + "</td></tr>");
}

Вот мой код

0 голосов
/ 04 февраля 2012

Попробуйте так: 

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