Добавить строку таблицы в jQuery
Возможный альтернативный метод. С небольшим набором, подобным этому, вы можете использовать грубую силу. Ваш набор {1, 2, 3, 4, 5, 6, 7, 8, 9, 10} имеет 10 элементов, и каждый элемент может присутствовать или отсутствовать. Это можно сопоставить с двоичным числом между 0 (= 0b0000000000) и 1023 (= 0b1111111111). Пронумеруйте числа от 0 до 1023 включительно и проверьте сумму для подмножества, соответствующего установленным битам двоичного представления числа.
Возможно, это не самый полезный для этого конкретного вопроса, но хороший способ генерации всех возможных подмножеств заданного набора.
6 ответов
Подход, который Вы предлагаете, как гарантируют, не даст Вам результат, который Вы ищете - что, если Вы имели tbody, например:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Вы закончили бы со следующим:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
я поэтому рекомендовал бы этот подход вместо этого:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
можно включать что-либо в after() метод, пока это - допустимый HTML, включая несколько строк согласно примеру выше.
Обновление: Пересматривание этого ответа после недавнего действия с этим вопросом. eyelidlessness делает хороший комментарий, что всегда будет tbody в DOM; это верно, но только если существует по крайней мере одна строка. Если у Вас не будет строк, не будет никакого tbody, если Вы не определили тот сами.
DaRKoN_ предлагает добавление tbody вместо того, чтобы добавить содержание после последнего tr. Это обходит проблему наличия никаких строк, но все еще не является пуленепробиваемым, как Вы могли теоретически иметь [приблизительно 1 110], элементы и строка добавить к каждому из них.
Уравновешивание всего, я не уверен, существует единственное короткое решение, которое составляет каждый возможный сценарий. Необходимо будет удостовериться счета кода jQuery с разметкой.
я думаю, что самое безопасное решение состоит в том, чтобы, вероятно, гарантировать Ваш table, всегда включает по крайней мере один tbody в Вашу разметку, даже если это не имеет никаких строк. На этой основе можно использовать следующее, которое будет работать однако много строк, которые Вы имеете (и также объясните [приблизительно 1 113] элементы):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
-
1Не вниз голосуют persay... Но, это было решение Pythonic в случаях как это для профилирования " obvious" опции и предпочитают самое быстрое. – Stan Graves 7 July 2009 в 01:37
Что, если Вы имели <tbody> и <tfoot>?
, такие как:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Тогда это вставило бы Вашу новую строку в нижний колонтитул - не к телу.
Следовательно лучшее решение состоит в том, чтобы включать <tbody> тег и использование .append, а не .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
-
1Это было очень прохладной и информативной ссылкой!Спасибо! – 24 June 2009 в 18:15
Можно использовать это великое , jQuery добавляет строку таблицы функция. Это работает отлично с таблицами, которые имеют <tbody> и которые не делают. Также это принимает во внимание colspan Вашей последней строки таблицы.
Вот использование в качестве примера:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
jQuery имеет встроенную возможность манипулировать элементами DOM на лету.
Вы можете добавить что угодно в свою таблицу следующим образом:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
$ (' в jQuery - это объект тега, который может иметь несколько атрибутов attr , которые можно устанавливать и получать, а также текст , который представляет текст между здесь тег: .
Это довольно странный отступ, но вам легче увидеть, что происходит в этом примере.
У меня были некоторые связанные проблемы, когда я пытался вставить строку таблицы после строки, по которой щелкнули мышью. Все в порядке, за исключением того, что вызов .after () не работает для последней строки.
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
Я получил очень неаккуратное решение:
создайте таблицу следующим образом (идентификатор для каждой строки):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
и т. Д. ..
а затем:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
Это можно легко сделать с помощью функции «Последние ()» функции jQuery.
$("#tableId").last().append("<tr><td>New row</td></tr>");