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

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

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

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

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

4.10.2008 21:33:10
Thxs Ash. Я тоже только изучаю jQuery и мне трудно найти лучший способ, особенно простые вещи. Причина в том, что они представляют собой два вопроса, потому что я опубликовал один, а затем почти час спустя я понял, что должен был вставить другой, и не думал, что я должен изменить первый.
Darryl Hein 6.10.2008 05:53:41
Darryl Hein 5.10.2009 22:54:16
К сведению - избегайте использования нескольких добавлений (значительно снижает производительность), лучше создавайте строку или используйте JavaScript-соединение, которое намного быстрее.
Gerrit Brink 16.04.2010 09:32:40
Super Model 16.05.2018 08:24:34
На всякий случай, если строка слишком сложная, то, что я делаю, - оставляю первую строку скрытой с необходимой структурой, создаю клон и модифицирую текст и вставляю после первой строки, таким образом, если вы выбираете данные из ответа ajax, ваша таблица будет создана, запомните клонировать его вне цикла, а затем использовать его для изменения содержимого внутри цикла. $ ("# mainTable tbody"). append (row); строка модифицированного клона-копии :)
Aadam 16.05.2018 12:00:18
30 ОТВЕТОВ
РЕШЕНИЕ

Подход, который вы предлагаете, не гарантирует, что вы получите результат, который вы ищете - что, если у вас есть, tbodyнапример:

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

В итоге вы получите следующее:

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

Поэтому я бы рекомендовал этот подход вместо этого:

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

Вы можете включить в after()метод все, что угодно, если это допустимый HTML, включая несколько строк, как в примере выше.

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

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

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

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

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
2133
23.05.2017 12:02:45
@ Рама, нет, не будет. Там должно быть лучшее решение.
Brian Liang 22.06.2009 14:21:01
В DOM всегда будет кто-то.
eyelidlessness 5.10.2009 19:20:51
пустой TBODY не проверяет ваш HTML , хотя
2ni 2.03.2010 21:21:53
Незначительным улучшением в противном случае было бы оптимизация селекторов. Вы можете получить улучшения скорости с: $('#myTable').find('tbody:last')вместо $('#myTable > tbody:last').
Erik Töyrä Silfverswärd 25.01.2012 12:48:52
«отсутствие век дает хороший комментарий, что в DOM всегда будет тело» - я просто попробовал это без тела, и оно не сработало - оно работает только при наличии тела.
BrainSlugs83 23.04.2013 23:13:09

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

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

768
29.02.2012 22:36:49
Для тех, кто пытается это сделать, обратите внимание на расположение скобок. Правильное вложение имеет решающее значение.
Ryan Lundy 9.08.2010 02:14:29
Как насчет закрывающих тегов? Они не нужны?
senfo 1.06.2011 15:33:36
Разве $ ("# tableClassname") не должно быть на самом деле $ ("# tableID"), поскольку хеш-символ ссылается на идентификатор, а не на имя класса?
Dave 13.01.2012 20:51:18
Я ненавижу такие странные цепочки. Поддерживать полный код таких вещей - кошмар.
bancer 7.02.2013 22:53:04
@senfo добавление дочерних элементов создаст их автоматически.
Michel de Ruiter 16.09.2013 09:39:28

Так что с тех пор, как @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>');
306
23.05.2017 12:26:38
Будьте осторожны с этим предположением. Если ваша добавленная разметка начинается с \ n или \ n \ r, jQuery не обнаружит, что это <tr>, и добавит его в <table>, а не в <tbody>. Я только что столкнулся с разметкой, сгенерированной представлением MVC, в начале которого была дополнительная строка.
Mik 25.11.2016 09:52:51
@ Мик, спасибо за внимание! Я думаю, yourString.trim()может исправить это.
Salman von Abbas 25.11.2016 10:00:58
Конечно, но вы должны подумать об этом. Лучше взять привычку добавлять к <tbody>, если вы знаете, что он есть.
Mik 25.11.2016 10:25:56
В jQuery 3.1 все еще требуется указание tbody. Проверьте это здесь: jsfiddle.net/umaj5zz9/2
user984003 20.04.2017 16:15:47
Это заставляет мою страницу обновляться. Как я могу предотвратить это?
Avi 31.07.2018 14:02:58

Что делать, если у вас есть <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>");
168
19.01.2016 10:18:04
Вы неправильно реализовали свой tfoot. Он должен идти до tbody, а не после - см. W3.org/TR/html4/struct/tables.html#h-11.2.3 . Поэтому мое решение все еще работает, если вы не решите нарушить стандарты (в этом случае вы можете ожидать, что другие вещи пойдут не так, как надо). Мое решение также работает независимо от того, есть ли у вас тело или нет, в то время как ваше предложение не будет выполнено, если оно отсутствует.
Luke Bennett 23.06.2009 10:24:01
Несмотря на любые ошибки в <tfoot />, это лучшее решение. Если <tbody /> нет, вы можете использовать ту же технику для самого <table />. Принимая во внимание, что «принятый ответ» требует дополнительной проверки, чтобы видеть, существует ли существующая строка. (Я знаю, что в ОП не было указано это требование, но это не имеет значения - этот пост занимает первое место в поиске Google по этой технике, и лучший ответ - не самый верхний.)
CleverPatrick 13.07.2009 14:49:06
Это лучшее решение, чем найти. В нескольких итерациях эта техника, кажется, всегда работает. Как добавленный FYI, вы можете использовать .prepend, чтобы добавить строку в начало таблицы, тогда как .append поместит строку в конец таблицы.
Lance Cleveland 3.01.2012 19:09:14
Это неверно, он добавит ряд к каждому ряду в
garg10may 6.11.2017 14:21:48
@ garg10may Можете ли вы посоветовать, как? Он нацелен на tbody, а не на любой дочерний элемент.
ChadT 7.11.2017 00:14:46

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

tableObject.insertRow(index)

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

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

Если этот параметр не указан, insertRow()вставляет новую строку в последнюю позицию в Internet Explorer и в первую позицию в Chrome и Safari.

Это будет работать для любой приемлемой структуры таблицы HTML.

В следующем примере будет вставлена ​​строка last (-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>

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

63
3.02.2019 18:18:50
проблема с этим методом (как я только что узнал) состоит в том, что если у вас есть нижний колонтитул, он добавит ПОСЛЕ нижнего колонтитула с -1 в качестве индекса.
kdubs 5.12.2012 03:11:28

я рекомендую

$('#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>
35
29.09.2011 05:34:26

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

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

Вот демо фиддл

32
17.11.2015 12:09:30
Если у вас есть несколько, tbodyвы можете получить несколько вставок
Mark Schultheiss 5.10.2018 20:17:32
Да, вы можете :) Вы можете попытаться $("SELECTOR").last()ограничить свою коллекцию тегов
sulest 8.10.2018 12:50:31

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
23
26.01.2010 17:12:29
Хорошая идея, но я думаю, что вы захотите изменить селектор на #tableId tr, так как прямо сейчас вы получите таблицу, добавив строку под таблицей.
Darryl Hein 26.01.2010 17:13:08

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

style.css:

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

xxx.html

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

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

...
17
16.12.2010 05:30:14
Спасибо. Это очень элегантное решение. Мне нравится, как он держит шаблон в сетке. Это делает код намного проще и легче для чтения и обслуживания. Еще раз спасибо.
Rodney 26.12.2015 21:33:54

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

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

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

14
24.01.2019 09:27:04
Теперь я могу успешно добавить динамические данные в новую строку, но после использования этого метода мой настраиваемый фильтр не работает .. У вас есть какое-либо решение для этого? Спасибо
Arjun 25.01.2019 05:28:05
Я думаю, вам нужно вызвать функцию обновления какого-то рода. Пришлось рассказать без примера.
Anton vBR 25.01.2019 06:22:01

У меня были некоторые связанные проблемы, пытаясь вставить строку таблицы после строки, по которой щелкнули. Все хорошо, за исключением того, что вызов .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);
13
26.06.2013 14:20:22
Я думаю, что это должен быть новый вопрос, а не ответ на уже существующий ...
Darryl Hein 5.10.2009 19:35:14

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

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

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
11
2.03.2009 13:21:48
Я не вижу, чтобы это было ужасно полезно. Все, что он делает, это добавляет пустую строку таблицы в таблицу. Обычно, если не всегда, вы хотите добавить новую строку таблицы с некоторыми данными в ней.
Darryl Hein 2.03.2009 17:48:14
Но обычно это то, что вы хотите. Эта функция позволяет вам добавлять пустую строку в любую из ваших таблиц, независимо от того, сколько у вас столбцов и интервалов строк, что делает ее функцией UNIVERSAL. Оттуда вы можете продолжить, например, с помощью $ ('. Tbl tr: last td'). Весь смысл в том, чтобы иметь универсальную функцию !!!
Uzbekjon 4.03.2009 04:15:54
Если ваша функция также добавляет данные в ваши новые строки, вы не сможете использовать их в следующий раз в своем следующем проекте. Какой смысл ?! По моему мнению, вам не нужно делиться этим ...
Uzbekjon 4.03.2009 04:19:02
Если вы предлагаете функцию, которая не является частью общего пакета, пожалуйста, поместите полный код функции здесь. Спасибо.
Yevgeniy Afanasyev 16.09.2015 05:38:28

Мое решение:

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

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

$('#Table').addNewRow(id1);
10
30.03.2013 05:46:51
так что, если нет tbodyв таблице .. ?? означает, что может быть строка непосредственно внутри <table>элемента, даже если без заголовка.
shashwat 18.05.2012 11:37:37
Я очень рекомендую, чтобы у вас была разметка с <TBody>, чтобы она соответствовала стандартам HTML 5, если нет, то вы всегда можете сделать $ (this) .append ('<tr id = "' + rowId + '"> </ тр> '); это просто добавляет строку в таблицу.
Ricky G 22.05.2012 22:07:02
Я думаю, что если вы собираетесь сделать это функцией, вы, возможно, могли бы вернуть объект jQuery для новой строки, чтобы она была цепной.
Chaos 22.12.2013 19:53:31
    // 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
6.12.2015 05:39:20
Хотя это может быть ответом, он не очень полезен посетителю позже ... Пожалуйста, добавьте пояснения к ответу.
Jayan 6.12.2015 05:23:29

Ответ Нейла, безусловно, самый лучший. Однако вещи быстро запутываются. Я предлагаю использовать переменные для хранения элементов и добавления их в иерархию 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
23.05.2017 12:34:45
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Написать с помощью функции JavaScript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
9
19.01.2016 20:09:33

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

9
23.05.2017 12:10:41

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

7
30.03.2013 05:55:35
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
7
21.12.2013 11:54:45

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

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
17.04.2015 16:36:47

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

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
7
20.07.2017 02:34:42

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

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

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

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

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

$("#table_id").eq(r-1).after(row_html);
6
20.05.2013 09:14:50

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

Дополнительная строка добавляется после 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.08.2013 11:35:58
<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
17.04.2015 16:37:05
$('#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для новой строки.

5
19.04.2012 10:53:35

Если вы используете плагин 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
2.10.2013 05:06:13

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

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
5
16.06.2015 12:11:44
Не могли бы вы более подробно изложить свой ответ, добавив немного больше описания предлагаемого вами решения?
abarisone 16.06.2015 13:09:48

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

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

4
26.03.2019 11:47:51