Додайте рядок таблиці в jQuery


2425

Який найкращий метод у jQuery для додавання додаткового рядка до таблиці як останнього рядка?

Це прийнятно?

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

Чи є обмеження в тому, що ви можете додати до такої таблиці (наприклад, введення, вибір, кількість рядків)?


2
Thxs Ash. Я теж просто вивчаю jQuery і мені важко зрозуміти найкращий спосіб, особливо прості речі. Причина у них як два питання - це те, що я розмістив одне, а потім майже через годину зрозумів, що повинен був би поставити другий, і не думав, що я повинен змінити перше.
Дарріл Хайн


17
FYI - уникайте використання декількох додатків (надзвичайно сповільнює продуктивність), скоріше нарощуйте рядок або використовуйте JavaScript приєднання, яке набагато швидше.
Герріт Брінк


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

Відповіді:


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
@Rama, ні, не буде. Потрібно краще рішення.
Брайан Лянг

40
У DOM завжди буде тіло.
безвічність

4
порожній tbody не підтверджує ваш html
2ni

40
Незначним покращенням інакшого приємного рішення було б оптимізація селекторів. Ви можете отримати поліпшення швидкості з: $('#myTable').find('tbody:last')а $('#myTable > tbody:last').
Erik Töyrä Silfverswärd

2
"Безкулісність робить хороший коментар, що в DOM завжди буде тіто" - я просто спробував це без tbody, і це не вийшло - це працює лише за наявності тамтешника.
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, який мав додатковий рядок на початку.
Мік,

@Mik дякую за голову! Я думаю, 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>");

10
Ви неправильно реалізували tfoot. Він повинен бути перед tbody, а не після - див. W3.org/TR/html4/struct/tables.html#h-11.2.3 . Тому моє рішення все ще працює, якщо ви не вирішите порушити стандарти (в такому випадку ви можете розраховувати, що й інші помиляться). Моє рішення також працює, чи є у вас товариш, чи ні, тоді як ваша пропозиція буде невдалою, якщо когось немає.
Люк Беннетт

6
Незважаючи на помилки в <tfoot />, це краще рішення. Якщо немає <tbody />, ви можете використовувати ту саму техніку на самій <table />. Тоді як "прийнята відповідь" вимагає додаткової перевірки, щоб побачити, чи існує чи не існує. (Я знаю, що ОП не вказала цю вимогу, але це не має значення - ця публікація з’являється першою в пошуку Google за цією методикою, і найкраща відповідь - не вгорі.)
CleverPatrick

5
Це краще рішення, ніж пошук. У кількох ітераціях ця методика завжди працює. Як доданий FYI, ви можете використовувати .prepend, щоб додати рядок до початку таблиці, тоді як .append додає рядок на кінець таблиці.
Ленс Клівленд

Це неправильно, він додасть рядок до кожного рядка в
tbody

@ garg10may Ви можете порадити, як? Він орієнтований на tbody, а не на будь-який дочірній елемент.
ChadT

64

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

Я сподіваюся, що це допомагає.


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>

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

ось демонстрація Fiddle

Також я можу порекомендувати невелику функцію, щоб зробити більше змін у HTML

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Якщо ви використовуєте мого струнного композитора, ви можете зробити це так

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Ось демонстрація Fiddle


Якщо у вас декілька, tbodyви можете отримати кілька вставок
Mark Schultheiss

Так, ви можете :) Ви можете спробувати $("SELECTOR").last()обмежити свою колекцію тегів
найпопулярніший

23

Це можна легко зробити за допомогою функції "last ()" jQuery.

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

9
Хороша ідея, але я думаю, ви хочете змінити селектор на #tableId tr, як зараз, ви отримаєте таблицю, щоб додати рядок під таблицею.
Дарріл Хайн

17

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

style.css:

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

xxx.html

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

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

...

Дякую. Це дуже елегантне рішення. Мені подобається, як він зберігає шаблон у сітці. Це робить код набагато простішим та легшим для читання та обслуговування. Знову дякую.
Родні

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

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>


Я можу успішно додати динамічні дані в новий рядок вже зараз, але після використання цього методу мій спеціальний фільтр не працює .. Чи є у вас якесь рішення для цього? T hank you
Arjun

Я думаю, вам потрібно викликати якусь функцію оновлення. Хаде розповісти без прикладу.
Антон vBR

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

Я думаю, що це має бути нове питання, а не відповідь на існуюче ...
Дарріл Хайн

11

Ви можете використовувати цю чудову функцію додавання рядків таблиці jQuery . Він чудово працює з таблицями, які є<tbody> а які ні. Крім того, він враховує розмір вашого останнього ряду таблиці.

Ось приклад використання:

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

Я не можу побачити, що це страшенно корисно. Все, що потрібно зробити - це додати порожній рядок до таблиці. Як правило, якщо не завжди, потрібно додати новий рядок таблиці з деякими даними.
Дарріл Хайн

1
Але це зазвичай те, що ти хочеш. Ця функція дозволяє додавати порожній рядок до будь-якої з ваших таблиць, незалежно від того, скільки стовпців і прольотів рядків у вас є, тим самим роблячи функцію УНІВЕРСАЛЬНОЮ. Ви можете продовжувати звідти, наприклад, $ ('. 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>елемента, навіть якщо без жодного заголовка.
shashwat

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

Я думаю, якщо ви збираєтеся зробити цю функцію, ви могли б повернути об’єкт 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);

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

Пишіть за допомогою функції javascript

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


7

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

Я провів тести на Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7Symbian 3), Android Stock та бета-браузери 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

Я здогадуюсь, що я зробив у своєму проекті, ось це:

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

якщо у вас є інша змінна, ви можете отримати доступ до такого <td>тегу, як спробуйте.

Таким чином я сподіваюся, що це буде корисно

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

6

Оскільки у мене також є спосіб додавати рядок нарешті або будь-яке конкретне місце, тому я думаю, що я повинен також поділитися цим:

Спочатку з’ясуйте довжину або рядки:

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

а потім використовуйте код нижче, щоб додати рядок:

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

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>

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

Перегляньте API даних даних fnAddData


5

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

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

Не могли б ви детальніше розглянути свою відповідь, додавши трохи більше опису про рішення, яке ви надаєте?
абарізон

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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.