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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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>.

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

Answer 3

Так что все изменилось с тех пор, как @ 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>');

Answer 4

Что, если у вас было <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>");

Answer 5

Я знаю, что вы запросили метод jQuery. Я много смотрел и обнаружил, что мы можем сделать это лучше, чем напрямую использовать JavaScript с помощью следующей функции.

tableObject.insertRow(index)

index - это целое число, которое указывает позицию вставляемой строки (начинается с 0). Также можно использовать значение -1; в результате чего новая строка будет вставлена ​​в последнюю позицию.

Этот параметр требуется в Firefox и Opera , но в Internet Explorer он необязателен, Chrome и Safari .

Если этот параметр не указан, insertRow() вставляет новую строку в последнюю позицию в Internet Explorer и в первую позицию в Chrome и Safari.

Это будет работать для любой приемлемой структуры таблицы HTML.

В следующем примере строка будет вставлена ​​последней (-1 используется как индекс):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Надеюсь, это поможет.

Answer 6

Я рекомендую

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

в отличие от

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

Ключевые слова first и last работают с первым или последним запускаемым тегом, а не с закрытым. Следовательно, это лучше подходит для вложенных таблиц, если вы не хотите, чтобы измененная таблица изменялась, а вместо этого добавляете ее в общую таблицу. По крайней мере, это то, что я нашел.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Answer 7

На мой взгляд, самый быстрый и понятный способ -

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

вот демо Fiddle

Также я могу порекомендовать небольшую функцию для внесения дополнительных изменений в HTML

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Если вы используете мой струнный композитор, вы можете сделать это как

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Вот демо Fiddle

Answer 8

Это легко сделать с помощью функции "last ()" в jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

Answer 9

Я использую этот способ, когда в таблице нет ни одной строки, а также, что каждая строка довольно сложна.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

Answer 10

Для лучшего решения, опубликованного здесь, если во второй строке есть вложенная таблица, новая строка будет добавлена ​​во вложенную таблицу вместо основной Быстрое решение (с учетом таблиц с / без tbody и таблиц с вложенными таблицами):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Пример использования:

add_new_row('#myTable','<tr><td>my new row</td></tr>');