Добавить строку в jQuery

каков наилучший метод в jQuery для добавления дополнительной строки в таблицу в качестве последней строки?

это приемлемо?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

существуют ли ограничения на то, что вы можете добавить в таблицу (например, входные данные, выбор, количество строк)?

2109
html-table javascript jquery

3 ответов

подход, который вы предлагаете, не гарантирует, что даст вам результат, который вы ищете - что, если бы у вас был 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, включая несколько строк в соответствии с приведенным выше примером.

обновление: Revisiting этот ответ после недавней активности с этим вопросом. eyelidlessness делает хороший комментарий, что там всегда будет tbody в DOM; это верно, но только если есть хотя бы одна строка. Если у вас нет строк, не будет tbody если вы не указали сами.

DaRKoN_ предполагает добавляя к tbody вместо добавления контента после последнего tr. Это обходит проблему отсутствия строк, но все же не пуленепробиваемый, как вы теоретически может иметь несколько tbody элементы и строка будут добавлены к каждому из них.

взвешивая все, я не уверен, что есть одно-строчное решение, которое учитывает каждый возможный сценарий. Вы должны убедиться в jQuery подсчитывает код с разметки.

я думаю, что самым безопасным решением, вероятно, является обеспечение вашего table всегда включает по крайней мере один tbody в вашей разметке, даже если у нее нет строк. На этой основе вы можете использовать следующее, которое будет работать, сколько строк у вас есть (а также учитывать несколько tbody элементы):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
1910

jQuery имеет встроенное средство для управления элементами DOM на лету.

вы можете добавить что-нибудь к вашей таблице, как это:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

на $('<some-tag>') вещь в jQuery-объект тега, который может иметь несколько attr атрибуты, которые можно установить и получить, а также text, который представляет текст между тегом здесь: <tag>text</tag>.

это довольно странный отступ, но вам легче увидеть, что происходит в этом образец.

709

так что все изменилось с тех пор @Luke Bennett отвечал на этот вопрос. Вот обновление.

jQuery с версии 1.4 (?) автоматически определяет, если элемент, который вы пытаетесь вставить (используя любой из append(), prepend(), before() или after() методов) - это <tr> и вставляет его в первый <tbody> в вашем столе или оборачивает его в новый <tbody> если он не существует.

Итак, да, ваш пример кода приемлем и будет отлично работать с jQuery 1.4+. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
281