Питання Додати рядок таблиці в jQuery


Який найкращий спосіб в jQuery додати додатковий рядок до таблиці як останній рядок?

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

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

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


2057
2017-10-04 21:33


походження


Thxs Ash. Я теж просто вивчаю jQuery і важко визначити найкращий спосіб, особливо прості речі. Причиною вони 2 питання, тому що я розмістив один, а потім майже через годину я зрозумів, я повинен був поставити інший в і не думаю, що я повинен змінити перший. - Darryl Hein
Тому що: google.com/search?q=jquery+add+table+row - Darryl Hein
FYI - уникайте використання декількох додатків (сповільнюється продуктивність), а створити рядок або використовувати JavaScript, який набагато швидше. - Gerrit Brink
побачити: stackoverflow.com/a/50365764/7186739 - Super Model
Про всяк випадок, якщо рядок занадто складний, я роблю це, тримайте перший рядок за допомогою необхідної структури, зробіть клон і змініть текст і вставте після першого рядка, таким чином, якщо ви отримаєте дані з відповіді ajax, ваша таблиця буде створена, запам'ятайте клонувати його поза циклом, а потім використати його для зміни вмісту всередині циклу. $ ("# mainTable tbody"). add (рядок); рядок - модифікована копія клону :) - Aadam


Відповіді:


Підхід, який ви пропонуєте, не гарантує, що ви отримаєте результат, який ви шукаєте - що, якщо б ви мали 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, включаючи кілька рядків, як у наведеному вище прикладі.

Оновлення: Перевірити цю відповідь після недавньої активності з цим питанням. без вічності робить гарний коментар, що завжди буде a tbody в DOM; це правда, але лише якщо є щонайменше один рядок. Якщо у вас немає рядків, їх не буде tbody якщо ви самі не вказали це.

DaRKoN_ пропонує додаючи до tbody а не додавання вмісту після останнього tr. Це ускладнює проблему відсутності рядків, але все одно не є куленепробивним, оскільки теоретично ви можете мати кілька tbody елементи та рядок додадуться до кожного з них.

Зважування всього, я не впевнений, що існує єдине рішення з однією лінією, в якому враховується кожен можливий сценарій. Вам потрібно буде переконатися, що код jQuery співпадає з вашою розміткою.

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

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

1872
2017-10-04 21:49



Чи працює ця функція, якщо в таблиці немає рядків? - Rama Vadakattu
@Рама ні, це не буде. Там повинно бути краще рішення. - Brian Liang
У DOM завжди буде тіло. - eyelidlessness
порожній tody не перевіряє ваш html, хоча - 2ni
Незначне покращення чутливого рішення - оптимізувати селектори. Ви можете отримати покращення швидкості з: $('#myTable').find('tbody:last')замість $('#myTable > tbody:last'). - Erik Töyrä


jQuery має вбудований об'єкт для маніпулювання елементами DOM на льоту.

Ви можете додати щось до свого столу так:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

The $('<some-tag>') Річ у jQuery - об'єкт тега, який може мати кілька attr атрибути, які можна встановити і отримати, а також text, який представляє текст між тегом тут: <tag>text</tag>.

Це якийсь дивний відступ, але вам простіше побачити, що відбувається в цьому прикладі.


699
2017-08-14 15:30



Для тих, хто намагається це зробити, уважно вкажіть розташування дужок. Правильне гніздування має вирішальне значення. - Ryan Lundy
Як щодо закриття тегів? Чи вони не потрібні? - senfo
Не варто $ ("# tableClassname") насправді бути $ ("# tableID"), оскільки хеш-символ відноситься до ідентифікатора, а не до класу? - Dave
якщо я хочу додати більше одного <td>, де це має бути? Дякую! - sammiwei
Я ненавиджу таке дивне зчеплення. Це кошмар для підтримки коду, повного таких речей. - bancer


Так що все змінилося @ Люк Беннетт Відповів це питання. Ось оновлення.

jQuery починаючи з версії 1.4 (?) автоматично виявляє, чи елемент, який ви намагаєтеся вставити (використовуючи будь-який з append(), prepend(), before(), або after() методи) є a <tr> і вставляє його в першу <tbody> в твоїй таблиці або обгортає його в нове <tbody> якщо цього не існує.

Так, так ваш приклад коду прийнятний і буде добре працювати з jQuery 1.4 +. ;)

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

276
2018-06-05 20:12



Будьте обережні з цим припущенням. Якщо ваша додана розмітка починається з \ n або \ n \ r, jQuery не буде виявляти, що він <tr> і додасть його до <table>, а не до <tbody>. Я просто зіткнувся з розміткою, створеним видом MVC, який мав додаткову лінію на початку. - Mik
@Мік спасибі за голів! я вважаю yourString.trim() може це виправити. - Salman Abbas
Звичайно, але треба думати про це. Краще візьміть звичку додати <tbody>, якщо ви знаєте, що є таке. - Mik
JQuery 3.1 все ще вимагає вказати те, що потрібно. Перевірте це тут: jsfiddle.net/umaj5zz9/2 - user984003
Це змушує мою сторінку оновити. Як це можна запобігти? - Avi


Що робити, якщо у вас є <tbody> і a <tfoot>?

Як от:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Потім він вставитиме ваш новий рядок в нижній колонтитул - не до тіла.

Отже, найкращим рішенням є включення a <tbody> тег і використання .append, а не .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

147
2018-01-22 06:47



Ви неправильно застосували вашу tfoot. Це повинно бути перед тілом, а не після - бачити w3.org/TR/html4/struct/tables.html#h-11.2.3. Тому моє рішення все ще працює, якщо ви не вирішите порушувати стандарти (у такому випадку ви можете очікувати, що інші помилки також вийдуть). Моє рішення також працює, чи є у вас тест або ні, тоді як ваша пропозиція не буде успішною, якщо у вас немає тіла. - Luke Bennett
Незважаючи на будь-які помилки в <tfoot />, це краще рішення. Якщо <tbody /> не існує, ви можете використовувати ту саму техніку на самому <table />. Оскільки "прийнята відповідь" вимагає додаткової перевірки, чи існує існуючий рядок. (Я знаю, OP не вказала цю вимогу, але це не має значення - це повідомлення потрапляє в першу чергу на пошуковий запит Google за цією технікою, і найкраща відповідь не є вершиною.) - Clever Human
Це краще рішення, ніж знайти. У кількох ітераціях ця методика завжди працює. Як доданий FYI, ви можете використовувати .prepend, щоб додати рядок до початку таблиці, тоді як .append поміщає рядок в кінці таблиці. - Lance Cleveland
Це невірно, він додає рядок до кожного рядка в темі - garg10may
@ garg10may Чи можете ви порадити, як? Він орієнтований на тіло, а не на будь-який дитячий елемент. - ChadT


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

tableObject.insertRow(index)

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

Цей параметр потрібний у Firefox і Опера, але в 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>

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


49
2018-04-20 17:38



проблема з цим методом (як я вже дізнався) полягає в тому, що якщо у вас є нижній колонтитул, він буде доданий після нижнього колонтитула з індексом -1. - kdubs


я рекомендую

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

на відміну від

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

The first і last ключові слова працюють над першим або останнім тегом, який буде запущений, а не закритий. Тому це виглядає краще з вставленими таблицями, якщо ви не хочете змінювати вкладену таблицю, а замість цього додати до загальної таблиці. Принаймні, це те, що я знайшов.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

31
2017-10-22 21:34





На мій погляд, найшвидшим і зрозумілим є спосіб

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

Ось демонстрація Скрипка


26
2018-06-30 12:40





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

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

22
2018-01-26 13:34



Гарна ідея, але я думаю, що ви хочете змінити селектор на #tableId tr, оскільки зараз ви отримаєте таблицю, додаючи рядок під таблицею. - Darryl Hein


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

style.css:

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

xxx.html

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

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

...

16
2017-12-16 05:30



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


У мене були пов'язані проблеми, намагаючись вставити рядок таблиці після натискання рядка. Все добре, крім того, що виклик .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);

13
2017-10-05 19:17



Відсутній HTML - це <tr id = "row1"> </ tr> <tr id = "row2"> </ tr> і так далі .. - Avron Olshewsky
Я думаю, це повинно стати новим питанням, а не відповіддю на існуючий ... - Darryl Hein