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

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

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

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

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

1888
задан Darryl Hein 05 окт. '08 в 0:33
источник поделиться

31 ответ

  • 1
  • 2

Подход, который вы предлагаете, не гарантированно даст вам результат, который вы ищете - что, если у вас был 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>');
1728
ответ дан Luke Bennett 05 окт. '08 в 0:49
источник поделиться

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

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

650
ответ дан Neil 14 авг. '09 в 18:30
источник поделиться

Итак, все изменилось с тех пор, как @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>');
261
ответ дан Salman Abbas 05 июня '12 в 23:12
источник поделиться

Что делать, если у вас есть <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>");
135
ответ дан ChadT 22 янв. '09 в 9:47
источник поделиться

Я знаю, что вы попросили метод 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>

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

43
ответ дан shashwat 20 апр. '12 в 20:38
источник поделиться

Я рекомендую

$('#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>
29
ответ дан Curtor 23 окт. '10 в 0:34
источник поделиться

По-моему, самый быстрый и понятный способ -

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

21
ответ дан sulest 30 июня '14 в 15:40
источник поделиться

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
19
ответ дан Nischal 26 янв. '10 в 16:34
источник поделиться

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

style.css:

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

xxx.html

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

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

...
14
ответ дан Dominic 16 дек. '10 в 8:30
источник поделиться

Для лучшего решения, размещенного здесь, если в последней строке есть вложенная таблица, новая строка будет добавлена ​​во вложенную таблицу вместо основной таблицы. Быстрое решение (с учетом таблиц с/без 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>');
11
ответ дан Oshua 22 янв. '11 в 1:21
источник поделиться

У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после щелкнутой строки. Все отлично, за исключением того, что вызов .after() не работает для последней строки.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Я приземлился с очень неопрятным решением:

создайте таблицу следующим образом (id для каждой строки):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

и т.д.

а затем:

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
11
ответ дан Avron Olshewsky 05 окт. '09 в 22:17
источник поделиться

Вы можете использовать эту замечательную функцию jQuery add table row. Он отлично работает с таблицами с <tbody>, а это не так. Также он учитывает кол-во последних строк таблицы.

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

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
10
ответ дан Uzbekjon 02 марта '09 в 16:21
источник поделиться
    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);
9
ответ дан Pankaj Garg 06 дек. '15 в 7:13
источник поделиться

Мое решение:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

использование:

$('#Table').addNewRow(id1);
9
ответ дан Ricky G 09 марта '12 в 3:48
источник поделиться

Ответ Нила, безусловно, самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию DOM.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
8
ответ дан GabrielOshiro 11 мая '14 в 15:04
источник поделиться

Я нашел этот AddRow plugin весьма полезным для управления строками таблицы. Хотя решение Luke было бы лучше всего подходит, если вам просто нужно добавить новую строку.

7
ответ дан Vitalii Fedorenko 05 дек. '11 в 4:09
источник поделиться

Вот какой хаккетский код взлома. Я хотел сохранить шаблон строки на странице HTML. Строки таблицы 0... n отображаются во время запроса, и этот пример имеет одну строку жесткого кодирования и упрощенную строку шаблона. Таблица шаблонов скрыта, и тег строки должен находиться в допустимой таблице, или браузеры могут удалить его из дерева DOM. Добавление строки использует идентификатор counter + 1, а текущее значение сохраняется в атрибуте данных. Он гарантирует, что каждая строка получает уникальные параметры URL.

Я провел тесты в Internet Explorer 8, Internet 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7Symbian 3), акции Android и Firefox бета-версии.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS: Я даю все кредиты команде jQuery; они заслуживают всего. Программирование JavaScript без jQuery - я даже не хочу думать об этом кошмаре.

6
ответ дан Whome 29 марта '13 в 0:51
источник поделиться

Я думаю, что сделал в моем проекте, вот он:

HTML

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

JS

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});
6
ответ дан SNEH PANDYA 31 янв. '14 в 9:13
источник поделиться
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Запись с помощью функции javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
6
ответ дан Jakir Hossain 19 янв. '16 в 23:09
источник поделиться
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
6
ответ дан Vivek S 21 дек. '13 в 14:54
источник поделиться
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

Вы можете кэшировать переменную нижнего колонтитула и уменьшить доступ к DOM (Примечание: может быть, лучше использовать поддельную строку вместо нижнего колонтитула).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
5
ответ дан Pavel Shkleinik 13 апр. '12 в 13:47
источник поделиться

Как у меня также есть способ добавить строку наконец или в какое-то конкретное место, поэтому я думаю, что я должен также поделиться этим:

Сначала найдите длину или строки:

var r=$("#content_table").length;

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

$("#table_id").eq(r-1).after(row_html);
5
ответ дан Jaid07 20 мая '13 в 12:14
источник поделиться
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

добавит новую строку в first TBODY таблицы, не зависимо от присутствия THEAD или TFOOT. (Я не нашел информацию, из какой версии jQuery .append() это поведение присутствует.)

Вы можете попробовать это в следующих примерах:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

В каком примере строка a b вставлена ​​после 1 2, а не после 3 4 во втором примере. Если таблица была пустой, jQuery создает TBODY для новой строки.

5
ответ дан Alexey Pavlov 19 апр. '12 в 13:53
источник поделиться

Чтобы добавить хороший пример в эту тему, вот работающее решение, если вам нужно добавить строку в определенную позицию.

Дополнительная строка добавляется после 5-й строки или в конце таблицы, если число строк меньше 5.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

Я помещаю содержимое в готовый (скрытый) контейнер под таблицей. Так, если вам (или дизайнеру) нужно изменить, не требуется редактировать JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>
5
ответ дан d.raev 29 авг. '13 в 14:35
источник поделиться

если у вас есть другая переменная, доступ к которой вы можете получить в теге <td>, как это попробуйте.

Таким образом, я надеюсь, что было бы полезно

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);
4
ответ дан MEAbid 14 окт. '16 в 8:18
источник поделиться

Если вы используете плагин Datatable JQuery, вы можете попробовать.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Refer Datatables fnAddData API Datatables

4
ответ дан Praveena M 02 окт. '13 в 8:06
источник поделиться

Простым способом:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
4
ответ дан vipul sorathiya 16 июня '15 в 15:11
источник поделиться

Это мое решение

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
3
ответ дан Daniel Ortegón 20 июля '17 в 5:34
источник поделиться

Если вы хотите добавить row перед первым дочерним элементом <tr>.

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

Если вы хотите добавить row после <tr> последнего ребенка.

$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
2
ответ дан Sumon Sarker 16 марта '17 в 12:07
источник поделиться

Это также можно сделать:

$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
0
ответ дан prashant 30 марта '17 в 10:24
источник поделиться
  • 1
  • 2

Другие вопросы по меткам