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

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

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

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

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

Спасибо Ash. Я тоже только изучаю jQuery и мне трудно найти лучший способ, особенно простые вещи. Причина, по которой они представляют собой 2 вопроса, заключается в том, что я опубликовал один, а затем почти через час я понял, что должен был вставить другой, и не думал, что должен менять первый.

Darryl Hein 06.10.2008 09:53

Из-за этого: google.com/search?q=jquery+add+table+row

Darryl Hein 06.10.2009 02:54

К вашему сведению - избегайте использования нескольких добавлений (значительно снижает производительность), лучше наращивайте свою строку или используйте соединение JavaScript, которое намного быстрее.

Gerrit Brink 16.04.2010 13:32

см .: stackoverflow.com/a/50365764/7186739

Muhammad Bilal 16.05.2018 11:24

На всякий случай, если строка слишком сложная, я делаю следующее: сохраняю первую строку скрытой с требуемой структурой, делаю клон и изменяю текст и вставляю после первой строки, таким образом, если вы извлекаете данные из ответа ajax, ваша таблица будет создана, помните клонируйте его вне цикла, а затем используйте его для изменения содержимого внутри цикла. $ ("# mainTable tbody"). append (строка); строка - это модифицированная копия клона :)

Aadam 16.05.2018 15:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2 517
5
1 775 812
40
Перейти к ответу Данный вопрос помечен как решенный

Ответы 40

Ответ принят как подходящий

Предлагаемый вами подход не гарантирует получения желаемого результата - что, если бы у вас был 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>');

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

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

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

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

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

Darryl Hein 02.03.2009 20:48

Но обычно это то, чего вы хотите. Эта функция позволяет вам добавлять пустую строку в любую из ваших таблиц, независимо от того, сколько столбцов и интервалов строк у вас есть, что делает ее УНИВЕРСАЛЬНОЙ функцией. Вы можете продолжить оттуда, например, с помощью $ ('. Tbl tr: last td'). Все дело в универсальности !!!

Uzbekjon 04.03.2009 07:15

Если ваша функция также добавляет данные в ваши новые строки, вы не сможете использовать их в следующий раз в своем следующем проекте. Какой в ​​этом смысл ?! Хотя, на мой взгляд, вам не нужно делиться этим ...

Uzbekjon 04.03.2009 07:19

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

Yevgeniy Afanasyev 16.09.2015 08:38

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

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

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

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

Я получил очень неопрятное решение:

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

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

так далее ...

а потом :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Я думаю, это должен быть новый вопрос, а не ответ на уже существующий ...

Darryl Hein 05.10.2009 23:35

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

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

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

Darryl Hein 26.01.2010 20:13

рекомендую

$('#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>

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

style.css:

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

xxx.html

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

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

...

Спасибо. Это очень элегантное решение. Мне нравится, как он сохраняет шаблон в сетке. Это делает код намного проще, его легче читать и поддерживать. Еще раз спасибо.

Rodney 27.12.2015 00:33

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

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

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

Мое решение:

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

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

$('#Table').addNewRow(id1);

ну и что, если в таблице нет tbody .. ?? означает, что внутри элемента <table> может быть строка, даже если без заголовка.

shashwat 18.05.2012 15:37

Я настоятельно рекомендую вам иметь разметку с помощью <TBody>, чтобы она соответствовала стандартам HTML 5, если нет, вы всегда можете сделать $ (this) .append ('<tr id = "' + rowId + '"> </ tr> '); это просто добавляет строку в таблицу.

Ricky G 23.05.2012 02:07

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

Chaos 22.12.2013 23:53

<table id=myTable>
    <tr><td></td></tr>
    <style = "height=0px;" tfoot></tfoot>
</table>

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

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

$('#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 для новой строки.

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

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

Итак, все изменилось с тех пор, как @ Люк Беннетт ответил на этот вопрос. Вот обновление.

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

Вот код взлома hacketi. Я хотел сохранить шаблон строки на странице HTML. Строки таблицы 0 ... n отображаются во время запроса, и в этом примере есть одна жестко запрограммированная строка и упрощенная строка шаблона. Таблица шаблона скрыта, и тег строки должен находиться в допустимой таблице, иначе браузеры могут удалить ее из дерева ДОМ. При добавлении строки используется идентификатор 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 - я даже не хочу думать об этом кошмаре.

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

Сначала узнайте длину или ряды:

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

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

$("#table_id").eq(r-1).after(row_html);

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

Дополнительная строка добавляется после 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>

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

Обратитесь к таблицам данных fnAddData Datatables API

<tr id = "tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

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

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

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

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

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

вот демо Скрипка

Также я могу порекомендовать небольшую функцию для внесения большего количества изменений в 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'
}));

Вот демо Скрипка

Если у вас несколько tbody, вы можете получить несколько вставок

Mark Schultheiss 05.10.2018 23:17

Да, вы можете :) Вы можете попробовать $("SELECTOR").last(), чтобы ограничить коллекцию тегов

sulest 08.10.2018 15:50

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

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Не могли бы вы подробнее рассказать о своем ответе, добавив еще немного описания предлагаемого вами решения?

abarisone 16.06.2015 16:09

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

Хотя это может быть ответом, позже он будет не очень полезен для посетителя ... Пожалуйста, добавьте некоторые пояснения к своему ответу.

Jayan 06.12.2015 08:23

<table id = "myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Пишите с помощью функции javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

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

Если вы хотите добавить 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>");

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

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

Это кажется довольно сложным и, возможно, даже медленнее для браузера / JS, поскольку ему нужно анализировать намного больше HTML.

Darryl Hein 30.03.2017 18:07

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

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

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

Использование 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>

Теперь я могу успешно добавить динамические данные в новую строку, но после использования этого метода мой собственный фильтр не работает. У вас есть какое-нибудь решение для этого? Спасибо

Arjun 25.01.2019 08:28

Я думаю, вам нужно вызвать какую-то функцию обновления. Пришлось рассказать без примера.

Anton vBR 25.01.2019 09:22

СОВЕТ: Вставка строк в 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);

Добавьте строку tabe с помощью JQuery:

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

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

если вы хотите добавить строку 1-й дочерний элемент строки таблицы, вы можете попробовать это

$('#myTable tr').after('<tr>...</tr><tr>...</tr>');

Попробуйте это: очень простой способ

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id = "myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>

Приведенные выше ответы очень полезны, но когда студент ссылается на эту ссылку, чтобы добавить данные из формы, им часто требуется образец.

Я хочу внести образец получения входных данных и использования .after() для вставки tr в таблицу с помощью строки interpolation.

function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}

function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();

$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick = "add()" value = "Add new" />
</form>
<table id='student'>
  <thead>
    <th>Name</th>
    <th>Mark</th>
  </thead>
</table>
</body>
</html>

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

$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');

Вы можете добавить несколько строк, как указано выше. Также вы можете добавить внутренние данные, например

$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');

по-другому вы можете сделать это

let table = document.getElementById("tableId");

let row = table.insertRow(1); // pass position where you want to add a new row


//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);


//add value to added td cell
 cell0.innerHTML = "your td content here";
 cell1.innerHTML = "your td content here";
 cell2.innerHTML = "your td content here";
 cell3.innerHTML = "your td content here";

Здесь вы можете просто нажать кнопку, и вы получите результат. Когда вы нажимаете кнопку Добавить ряд, добавляется еще одна строка.

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

<html> 

<head> 
    <script src= 
            "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <style> 
        table { 
            margin: 25px 0; 
            width: 200px; 
        } 

        table th, table td { 
            padding: 10px; 
            text-align: center; 
        } 

        table, th, td { 
            border: 1px solid; 
        } 
    </style> 
</head> 

<body> 

    <b>Add table row in jQuery</b> 

    <p> 
        Click on the button below to 
        add a row to the table 
    </p> 

    <button class = "add-row"> 
        Add row 
    </button> 

    <table> 
        <thead> 
            <tr> 
                <th>Rows</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>This is row 0</td> 
            </tr> 
        </tbody> 
    </table> 

    <!-- Script to add table row -->
    <script> 
        let rowno = 1; 
        $(document).ready(function () { 
            $(".add-row").click(function () { 
                rows = "<tr><td>This is row " 
                    + rowno + "</td></tr>"; 
                tableBody = $("table tbody"); 
                tableBody.append(rows); 
                rowno++; 
            }); 
        }); 
    </script> 
</body> 
</html>                  

Чистый JS довольно короткий в вашем случае

myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'

function add() {
  myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>`
}
td {border: 1px solid black;}
<button onclick = "add()">Add</button><br>
<table id = "myTable"><tbody></tbody> </table>

(если мы удалим <tbody> и firstChild, он также будет работать, но каждая строка будет заключена в <tbody>)

Я попробовал самый популярный вариант, но у меня он не сработал, но ниже работает хорошо.

$('#mytable tr').last().after('<tr><td></td></tr>');

Что будет работать, даже если там есть тобди.

) Дэрил:

Вы можете добавить его к телу, используя метод appendTo следующим образом:

$(() => {
   $("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});

Вероятно, вы захотите использовать последнюю версию JQuery и ECMAScript. Затем вы можете использовать серверный язык для добавления данных в таблицу. Вы также можете заключить его в такую ​​переменную:

$(() => {
  var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
  t_data.appendTo('tbody');
});

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