Курсы javascript
.append() добавляет в конец, а .prepend() — в самое начало (до заголовков таблицы), как добавить строку в начало после первого , т.е. после заголовков?
24.09.2013, 09:59
Регистрация: 27.05.2010
Сообщений: 33,031
Добавление строк в таблицу Native JavaScript
Untitled
| 1 | 1 |
| 2 | 2 |
Последний раз редактировалось рони, 24.09.2013 в 10:11 .
24.09.2013, 10:07
Регистрация: 27.05.2010
Сообщений: 33,031
Добавление строк в таблицу на jQuery
allanmiln,
Untitled
| 1 | 1 |
| 2 | 2 |
Последний раз редактировалось рони, 24.09.2013 в 10:11 .
Добавление строки в таблицу с помощью jQuery
Часто встает задача динамического добавления строки в таблицу на веб-странице. Например, при работе с интерактивными таблицами, когда необходимо добавить информацию без перезагрузки страницы. Это можно легко сделать с помощью jQuery.
Пример добавления строки в таблицу:
$('#myTable').append('<tr><td>данные</td><td>еще данные</td></tr>');
Здесь используется метод append() , который добавляет указанный контент в конец выбранного элемента. В данном случае, в конец элемента с идентификатором «myTable» добавляется новая строка таблицы.
Можно добавить любые HTML-элементы внутрь ячеек таблицы, включая , и другие формы ввода. Количество строк, которое можно добавить, теоретически не ограничено, хотя на практике может быть ограничено производительностью браузера.
Также можно использовать различные способы добавления строк в таблицу. Вместо метода append() , можно воспользоваться методом after() , который вставляет контент после выбранного элемента. Например, если необходимо добавить строку после определенной строки в таблице:
$('#someRow').after('<tr><td>данные</td><td>еще данные</td></tr>');
В этом примере новая строка будет добавлена после строки с идентификатором «someRow».
В целом, jQuery предоставляет удобные и мощные инструменты для работы с таблицами, позволяя легко добавлять и модифицировать строки.
Курсы javascript
Все работает, строки добавляются по нажатию «+», но с одним неприятным деффектом — стираются уже заполненные поля.
Т.е. нажав «+» в данной форме: http://prntscr.com/clqopm
Получу следующее: http://prntscr.com/clqovj
Помогите побороть это недоразумение.
Заранее спасибо.
Последний раз редактировалось visajack, 24.09.2016 в 13:54 .
24.09.2016, 14:53
Регистрация: 14.01.2015
Сообщений: 12,990
Таблицу в span уже плохо. Рег. выражения тут лишнее. Стили из тегов убрать. Не надо ни каких номеров полям, индексы будет проставлены автоматически согласно порядку полей в форме. На jQuery:
#tbl < border-collapse: collapse; >#tbl td < border: 1px solid #ddd; padding: 4px; >#tbl input < width: 50px; >a.delRow, #addRow
Последний раз редактировалось laimas, 24.09.2016 в 14:58 .
24.09.2016, 15:03
Регистрация: 08.07.2016
Сообщений: 1,332
Это не задача, а реализация. Ты хочешь реализацию реализации, или какова задача?
24.09.2016, 15:48
Новичок на форуме
Регистрация: 24.09.2016
Сообщений: 2
laimas, огромное спасибо за код.
В приведенном примере поля input были для примера, в реальности использую так же textarea.
Изменил чутка скрипт:
Всё работает великолепно.
Ещё раз огромное спасибо.
2 warren buffet
Изначальная ЗАДАЧА была в создании динамической формы ибо количество полей неизвестно. Реализацию ЗАДАЧИ нашёл в интернете, но возникли сложности описанные в первом посте.
Потому потребовалась помощь в реализации изменений в готовой реализации изначально поставленной задачи. Что, само по себе, и является задачей. Не?
24.09.2016, 17:30
Регистрация: 14.01.2015
Сообщений: 12,990
visajack,
таблица все таки для табличных данных, а форматировать элементы в форме можно более легкими средствами. Ищите в сети, там много пример по данному вопросу.
24.09.2016, 18:48
Регистрация: 08.07.2016
Сообщений: 1,332
visajack, нет таких динамических форм. Твоя задача называется
а форма не нужна, поскольку ты все равно используешь жабу скрипучую.
В datagrid поля не размножаются, а просто подставляются в строку, куда юзер щелкнул. Ладно, не важно, посмотри как делают по словам datagrid javascript в гугле.
Курсы javascript
Добрый вечер. Я еще только учусь программировать на JavaScript. Нужна помощь.
Задача такая: есть таблица из двух столбцов с именами и фамилиями людей. Под ней находится форма (два инпута и кнопка), при заполнении которой в таблицу должна добавиться новая строка с введенными данными. Я написал код, строка добавляется, но при этом тут же странным образом исчезает, вот что есть: https://codepen.io/colod/pen/YjOGEg.
Пробовал сделать при помощи функций из DOM2(insertCell, insertRow и т.д.), проблема не исчезает. Заранее спасибо.