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

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

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

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

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

вопрос задан 4.10.2008
Darryl Hein
66521 репутация

32 ответов


  • 1905 рейтинг

    Подход, который вы предлагаете, не гарантированно даст вам результат, который вы ищете - что, если у вас было 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 id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> всегда включал по крайней мере один <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> в вашей разметке, даже если у него нет строк. Исходя из этого, вы можете использовать следующее, которое будет работать, несмотря на то, что у вас есть много строк (а также учет нескольких <table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table> элементов):

     <table id="myTable">
      <tbody>
        <tr>...</tr>
        <tr>...</tr>
      </tbody>
    </table>
     
    ответ дан Luke Bennett, с репутацией 27569, 4.10.2008
  • 708 рейтинг

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

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

    ответ дан Neil, с репутацией 13090, 14.08.2009
  • 280 рейтинг

    Так что все изменилось с тех пор, как @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>');
     
    ответ дан Salman Abbas, с репутацией 17152, 5.06.2012
  • 151 рейтинг

    Что делать, если у вас есть <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>");
     
    ответ дан ChadT, с репутацией 6122, 22.01.2009
  • 51 рейтинг

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

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

    ответ дан shashwat, с репутацией 4998, 20.04.2012
  • 33 рейтинг

    рекомендую

     $('#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>
     
    ответ дан Curtor, с репутацией 502, 22.10.2010
  • 29 рейтинг

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

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

    Вот демонстрация скрипки

    ответ дан sulest, с репутацией 776, 30.06.2014
  • 23 рейтинг

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

     $("#tableId").last().append("<tr><td>New row</td></tr>");
     
    ответ дан Nischal, с репутацией 690, 26.01.2010
  • 16 рейтинг

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

    style.css:

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

    xxx.html

     ...
    <tr id="templateRow"> ... </tr>
    ...
    
    $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
    
    ...
     
    ответ дан Dominic, с репутацией 161, 16.12.2010
  • 13 рейтинг

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

    У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после щелкнутой строки. Все нормально, за исключением того, что вызов .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);
     
    ответ дан Avron Olshewsky, с репутацией 131, 5.10.2009
  • 10 рейтинг

    Мое решение:

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

    Применение:

     $('#Table').addNewRow(id1);
     
    ответ дан Ricky G, с репутацией 2021, 9.03.2012
  • 10 рейтинг
        // 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);
    
    ответ дан Pankaj Garg, с репутацией 720, 6.12.2015
  • 10 рейтинг

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

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

     // One table
    addTableRow($('#myTable'));
    // add table row to number of tables
    addTableRow($('.myTables'));
     
    ответ дан Uzbekjon, с репутацией 9322, 2.03.2009
  • 9 рейтинг

    Ответ Нила безусловно самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию 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);
     
    ответ дан GabrielOshiro, с репутацией 4960, 11.05.2014
  • 8 рейтинг

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

    ответ дан Vitalii Fedorenko, с репутацией 66689, 5.12.2011
  • 7 рейтинг

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

    Я проверил тесты на Internet Explorer 8, Internet Explorer 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 - я даже не хочу думать об этом кошмаре.

    ответ дан Whome, с репутацией 7350, 28.03.2013
  • 7 рейтинг

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

    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');
        });
          });
    });
     
    ответ дан SNEH PANDYA, с репутацией 658, 31.01.2014
  • 7 рейтинг
    <tr id="tablerow"></tr>
    
    $('#tablerow').append('<tr>...</tr><tr>...</tr>');
    
    ответ дан Vivek S, с репутацией 1427, 21.12.2013
  • 7 рейтинг
     <table id="myTable">
      <tbody>
        <tr>...</tr>
        <tr>...</tr>
      </tbody>
      <tr>...</tr>
    </table>
     

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

     document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
     
    ответ дан Jakir Hossain, с репутацией 1794, 19.01.2016
  • 6 рейтинг
     <table id=myTable>
        <tr><td></td></tr>
        <style="height=0px;" tfoot></tfoot>
    </table>
     

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

     var footer = $("#mytable tfoot")
    footer.before("<tr><td></td></tr>")
     
    ответ дан Pavel Shkleinik, с репутацией 4986, 13.04.2012
  • 6 рейтинг

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

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

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

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

     $("#table_id").eq(r-1).after(row_html);
     
    ответ дан Jaid07, с репутацией 153, 20.05.2013
  • 6 рейтинг

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

    Дополнительная строка добавляется после 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>
     
    ответ дан d.raev, с репутацией 5439, 29.08.2013
  • 6 рейтинг

    если у вас есть другая переменная, вы можете получить доступ в теге <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);
     
    ответ дан MEAbid, с репутацией 375, 14.10.2016
  • 6 рейтинг

    Я решил это так, что я считаю самым читаемым :)

     $('#tab').append($('<tr>')
        .append($('<td>').append("text"))
        .append($('<td>').append("text"))
        .append($('<td>').append("text"))
        .append($('<td>').append("text"))
      )
     
    ответ дан Anton vBR, с репутацией 10400, 12.10.2017
  • 5 рейтинг

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

     $('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
     
    ответ дан vipul sorathiya, с репутацией 997, 16.06.2015
  • 5 рейтинг
     $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
     

    добавит новую строку в первую 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 для новой строки.

    ответ дан Alexey Pavlov, с репутацией 110, 19.04.2012
  • 5 рейтинг

    Если вы используете плагин 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 API-интерфейсы datatables fnAddData

    ответ дан Praveena M, с репутацией 125, 2.10.2013
  • 4 рейтинг

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

     $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
     
    ответ дан Daniel Ortegón, с репутацией 91, 20.07.2017
  • 4 рейтинг

    Если вы хотите добавить 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>");
     
    ответ дан Sumon Sarker, с репутацией 2479, 16.03.2017
  • 0 рейтинг

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

     $("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
     
    ответ дан prashant, с репутацией 285, 30.03.2017
  • 0 рейтинг

    СОВЕТ. Вставка строк в html table через innerHTML or .html() недопустима в некоторых браузерах (аналогично IE9 ), а использование .append("<tr></tr>") не является хорошим предложением в любом браузере. Лучший и быстрый способ - использовать pure javascript кода.

    для объединения этого способа с jQuery , добавьте только новый плагин, подобный этому jQuery :

     $.fn.addRow=function(index/*-1: add to end  or  any desired index*/, cellsCount/*optional*/){
        if(this[0].tagName.toLowerCase()!="table") return null;
        var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
        for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
        return $(r);
    };
     

    И теперь используйте его в целом по проекту, подобному этому:

     var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);
     
    ответ дан Hassan Sadeghi, с репутацией 783, 18.08.2018