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

2425

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

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

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

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

Дэррил Хейн
источник
2
Thxs Ash. Я тоже только изучаю jQuery и мне трудно найти лучший способ, особенно простые вещи. Причина в том, что они представляют собой два вопроса, потому что я опубликовал один, а затем почти час спустя я понял, что должен был вставить другой, и не думал, что должен изменить первый.
Дэррил Хейн
30
Из-за этого: google.com/search?q=jquery+add+table+row
Дэррил Хейн,
17
К сведению - избегайте использования нескольких добавлений (значительно снижает производительность), скорее создавайте строку или используйте JavaScript-соединение, которое намного быстрее.
Геррит Бринк
см .: stackoverflow.com/a/50365764/7186739
Супер модель
На всякий случай, если строка слишком сложная, то, что я делаю, - оставьте первую строку скрытой с необходимой структурой, сделайте клон, измените текст и вставьте после первой строки, таким образом, если вы выбираете данные из ответа ajax, ваша таблица будет создана, запомните клонировать его вне цикла, а затем использовать его для изменения содержимого внутри цикла. $ ("# mainTable tbody"). append (row); строка модифицированного клона-копии :)
Аадам

Ответы:

2143

Подход, который вы предлагаете, не гарантирует, что вы получите результат, который вы ищете - что, если у вас есть, 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>');
Люк Беннетт
источник
6
@ Рама, нет, не будет. Там должно быть лучшее решение.
Брайан Лян
40
В DOM всегда будет кто-нибудь.
век
4
пустой TBODY не проверяет ваш HTML , хотя
40
Незначительным улучшением в противном случае было бы оптимизировать селекторы. Вы можете получить улучшения скорости с: $('#myTable').find('tbody:last')вместо $('#myTable > tbody:last').
Эрик Тёйра Сильфверсвард
2
«отсутствие век дает хороший комментарий, что в DOM всегда будет тело» - я просто попробовал это без тела, и оно не сработало - оно работает только при наличии тела.
BrainSlugs83
771

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

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

Нил
источник
60
Для тех, кто пытается это сделать, обратите внимание на расположение скобок. Правильное вложение имеет решающее значение.
Райан Ланди
9
Как насчет закрывающих тегов? Они не нужны?
Senfo
9
Разве $ ("# tableClassname") не должно быть на самом деле $ ("# tableID"), поскольку хеш-символ ссылается на идентификатор, а не на имя класса?
Дэйв
7
Я ненавижу такие странные цепочки. Поддерживать полный код таких вещей - кошмар.
bancer
4
@senfo добавление дочерних элементов создаст их автоматически.
Мишель де Рюйтер
308

Так что с тех пор все изменилось @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>');
Салман фон Аббас
источник
2
Будьте осторожны с этим предположением. Если ваша добавленная разметка начинается с \ n или \ n \ r, jQuery не обнаружит, что это <tr>, и добавит ее в <table>, а не в <tbody>. Я только что столкнулся с разметкой, сгенерированной представлением MVC, в начале которого была дополнительная строка.
Мик
@Мик, спасибо за голову! Я думаю, yourString.trim()может исправить это.
Салман фон Аббас
Конечно, но вы должны подумать об этом. Лучше взять привычку добавлять к <tbody>, если вы знаете, что он есть.
Мик
В jQuery 3.1 все еще требуется указание tbody. Проверьте это здесь: jsfiddle.net/umaj5zz9/2
user984003
Это заставляет мою страницу обновляться. Как я могу предотвратить это?
Ави
168

Что делать, если у вас есть <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
источник
10
Вы неправильно реализовали свой tfoot. Он должен быть перед командой, а не после - см. W3.org/TR/html4/struct/tables.html#h-11.2.3 . Поэтому мое решение все еще работает, если вы не решите нарушить стандарты (в этом случае вы можете ожидать, что другие вещи пойдут не так, как надо). Мое решение также работает независимо от того, есть ли у вас тело или нет, тогда как ваше предложение не будет выполнено, если тело не будет присутствовать.
Люк Беннетт
6
Несмотря на любые ошибки в <tfoot />, это лучшее решение. Если <tbody /> нет, вы можете использовать ту же технику для самого <table />. Принимая во внимание, что «принятый ответ» требует дополнительной проверки, чтобы видеть, существует ли существующая строка. (Я знаю, что в ОП не было указано это требование, но это не имеет значения - этот пост занимает первое место в поиске Google по этой технике, и лучший ответ - не самый верхний.)
CleverPatrick
5
Это лучшее решение, чем найти. В нескольких итерациях эта техника, кажется, всегда работает. Как добавленный FYI, вы можете использовать .prepend, чтобы добавить строку в начало таблицы, тогда как .append поместит строку в конец таблицы.
Ланс Кливленд
Это неверно, он добавит ряд к каждому ряду в
tbody
@ garg10may Можете ли вы посоветовать, как? Он нацелен на tbody, а не на любой дочерний элемент.
ЧадТ
64

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

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

shashwat
источник
2
проблема с этим методом (как я только что узнал) заключается в том, что если у вас есть нижний колонтитул, он добавит ПОСЛЕ нижнего колонтитула с -1 в качестве индекса.
kdubs
35

я рекомендую

$('#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
источник
32

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

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

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

sulest
источник
Если у вас есть несколько, tbodyвы можете получить несколько вставок
Марк Schultheiss
Да, вы можете :) Вы можете попытаться $("SELECTOR").last()ограничить свою коллекцию тегов
sulest
23

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
Nischal
источник
9
Хорошая идея, но я думаю, что вы захотите изменить селектор на #tableId tr, так как прямо сейчас вы получите таблицу, добавив строку под таблицей.
Дэррил Хейн
17

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

style.css:

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

xxx.html

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

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

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

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

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

Использование 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
Я думаю, что вам нужно вызвать функцию обновления какого-то рода. Пришлось рассказать без примера.
Антон vBR
13

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

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

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

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Uzbekjon
источник
Я не вижу, чтобы это было ужасно полезно. Все, что он делает, это добавляет пустую строку таблицы в таблицу. Обычно, если не всегда, вы хотите добавить новую строку таблицы с некоторыми данными в ней.
Дэррил Хейн
1
Но обычно это то, что вы хотите. Эта функция позволяет добавлять пустую строку в любую из ваших таблиц, независимо от того, сколько столбцов и интервалов у вас есть, что делает ее функцией UNIVERSAL. Оттуда вы можете продолжить, например, с помощью $ ('. Tbl tr: last td'). Весь смысл в том, чтобы иметь универсальную функцию !!!
Узбекджон
Если ваша функция также добавляет данные в ваши новые строки, вы не сможете использовать их в следующий раз в вашем следующем проекте. Какой смысл ?! По моему мнению, вам не нужно делиться этим ...
Узбекджон
Если вы предлагаете функцию, которая не является частью общего пакета, пожалуйста, поместите полный код функции здесь. Спасибо.
Евгений Афанасьев
10

Мое решение:

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

Применение:

$('#Table').addNewRow(id1);
Рики Г
источник
так что, если нет tbodyв таблице .. ?? означает, что может быть строка непосредственно внутри <table>элемента, даже если без заголовка.
Шашват
Я очень рекомендую, чтобы у вас была разметка с <TBody>, чтобы она соответствовала стандартам HTML 5, если нет, то вы всегда можете сделать $ (this) .append ('<tr id = "' + rowId + '"> </ тр> '); это просто добавляет строку в таблицу.
Рикки Дж
Я думаю, что если вы собираетесь сделать это функцией, вы, возможно, могли бы вернуть объект jQuery для новой строки, чтобы он был цепным.
Хаос
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);
Панкадж Гарг
источник
Хотя это может быть ответом, это не очень полезно для посетителя позже ... Пожалуйста, добавьте некоторые объяснения вокруг вашего ответа.
Джаян
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
источник
9
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

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

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
Якир Хоссейн
источник
9

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

Виталий Федоренко
источник
7

Вот некоторый хакетский хак код. Я хотел сохранить шаблон строки на странице 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 - я даже не хочу думать об этом кошмаре.

Whome
источник
7
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
Вивек С
источник
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');
    });
      });
});
СНЕХ ПАНДЯ
источник
7

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

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
Даниэль Ортегон
источник
7

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

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

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

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

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

$("#table_id").eq(r-1).after(row_html);
Jaid07
источник
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
источник
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>")
Павел Шклейник
источник
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для новой строки.

Алексей Павлов
источник
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);

См. Datatables fnAddData Datatables API

Правина М
источник
5

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

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
Vipul Sorathiya
источник
Не могли бы вы более подробно изложить свой ответ, добавив немного больше описания предлагаемого вами решения?
abarisone
4

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

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

rajmobiapp
источник