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

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

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

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

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

+2234
04 окт. '08 в 21:33
источник поделиться
35 ответов
  • 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>');
+1996
04 окт. '08 в 21: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>.

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

+734
14 авг. '09 в 15: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>');
+290
05 июн. '12 в 20: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>");
+158
22 янв. '09 в 6:47
источник

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

tableObject.insertRow(index)

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

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

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

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

+57
20 апр. '12 в 17: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>
+34
22 окт. '10 в 21: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

+31
30 июн. '14 в 12:40
источник

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
+23
26 янв. '10 в 13:34
источник

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

style.css:

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

xxx.html

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

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

...
+17
16 дек. '10 в 5: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>');
+14
21 янв. '11 в 22: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);
+13
05 окт. '09 в 19:17
источник

Я решил это таким образом.

Использование jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

отрывок

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>
+13
12 окт. '17 в 17:54
источник

Мое решение:

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

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

$('#Table').addNewRow(id1);
+10
09 мар. '12 в 0:48
источник

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

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

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
+10
02 мар. '09 в 13: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);
+10
06 дек. '15 в 4:13
источник

Ответ Нила, безусловно, самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию 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);
+9
11 мая '14 в 12:04
источник

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

+8
05 дек. '11 в 1: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 - я даже не хочу думать об этом кошмаре.

+7
28 мар. '13 в 21:51
источник
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

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

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
+7
19 янв. '16 в 20:09
источник

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

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');
    });
      });
});
+7
31 янв. '14 в 6:13
источник

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

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
+7
20 июл. '17 в 2:34
источник
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
+7
21 дек. '13 в 11:54
источник

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

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

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

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

$("#table_id").eq(r-1).after(row_html);
+6
20 мая '13 в 9:14
источник

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

Дополнительная строка добавляется после 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>
+6
29 авг. '13 в 11: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);
+6
14 окт. '16 в 5:18
источник
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

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

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
+6
13 апр. '12 в 10:47
источник

Если вы используете плагин 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);

См. Datatables fnAddData Datatables API

+5
02 окт. '13 в 5:06
источник

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

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
+5
16 июн. '15 в 12:11
источник
$('#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
19 апр. '12 в 10:53
источник

Если вы хотите добавить 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>");
+4
16 мар. '17 в 9:07
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос