Javascript - додати рядок таблиці в jquery - html-table, code q - a український (ru)

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

Ви отримаєте наступне:

Тому я б рекомендував цей підхід:

Ви можете включити що-небудь в метод after () якщо це допустимий HTML, включаючи кілька рядків відповідно до наведеного вище прикладом.

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

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

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

JQuery має вбудоване засіб для управління елементами DOM на льоту.

Ви можете додати що-небудь в свій стіл наступним чином:

Об'єкт $ ( '') В jQuery - це об'єкт тега, який може мати кілька атрибутів attr які можна встановити і отримати, а також text. який представляє текст між тегом тут: text.

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

Так що все змінилося з тих пір, як @Luke Bennett відповів на це питання. Ось оновлення.

JQuery, так як версія 1.4 (?) Автоматично визначає, чи буде елемент, який ви намагаєтеся вставити (використовуючи будь-які методи append (). Prepend (). Before () або after ()), є і вставляє його в Спочатку у вашій таблиці або оберніть його в новий якщо він не існує.

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

Що, якщо у вас були і .

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

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

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

Ця установка може знадобитися в Firefox і Opera. але він не є обов'язковим в Internet Explorer, Chrome і Safari.

Якщо цей параметр опущений, insertRow () вставляє новий рядок в останню позицію в Internet Explorer і в першу позицію в Chrome і Safari.

Він буде працювати для кожної прийнятною структури таблиці HTML.

У наступному прикладі вставка останнього рядка (-1 використовується як індекс):

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

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

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

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

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

Це можна зробити легко, використовуючи функцію last () для jQuery.

Я знайшов цей плагін AddRow вельми корисним для управління рядками таблиці. Хоча, рішення Люка було б найкраще підходить, якщо вам просто потрібно додати новий рядок.

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

Я запускав тести в Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800. Nokia C7 (з Symbian 3), бета-версіях Android і Firefox.

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

TBODY новий рядок до першого TBODY таблиці, не залежно від присутності THEAD або TFOOT. (Я не знайшов інформацію, з якої версії jQuery .append () це поведінка присутня.)

Ви можете спробувати це в наступних прикладах:

У якому прикладі рядок ab вставлена ​​після 1 2. а не після 3 4 ст другому прикладі. Якщо таблиця була порожньою, jQuery створює TBODY для нового рядка.

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

Спочатку знайдіть довжину або рядки:

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

Щоб додати хороший приклад в цю тему, це робоче рішення, якщо вам потрібно додати рядок в певну позицію.

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

Я розміщую вміст в готовий (прихований) контейнер під таблицею. Так що якщо вам (або дизайнерові) потрібно змінити, не потрібно редагувати JS.

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

Якщо ви використовуєте плагін Datatable JQuery, ви можете спробувати.

Схожі статті