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


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

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

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

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


2029


источник


Ответы:


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

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

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

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

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

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

1837



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

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


695



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

273



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

146



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

tableObject.insertRow(index)

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

Этот параметр требуется в Firefox и опера , но он не является обязательным в Internet Explorer, Хром а также Сафари ,

Если этот параметр опущен, 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>

Я надеюсь, что это помогает.


48



I recommend

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

as opposed to

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

The first and last keywords work on the first or last tag to be started, not closed. Therefore, this plays nicer with nested tables, if you don't want the nested table to be changed, but instead add to the overall table. At least, this is what I found.

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

31



In my opinion the fastest and clear way is

//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>');

here is demo Fiddle

Also I can recommend a small function to make more html changes

//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] : '';
        });
    }
}());

If you use my string composer you can do this like

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'
}));

Here is demo Fiddle


26



This can be done easily using the "last()" function of jQuery.

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

21