Elettracompany.com

Компьютерный справочник
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript добавить строку в таблицу

Динамическая работа с таблицами

Часто при использовании html таблиц с помощью JavaScript можно избежать лишних перезагрузок страницы, улучшить юзабилити и упростить работу пользователей.
Под динамической работой понимается:

  1. создание;
  2. управление атрибутами;
  3. добавление/удаление столбцов и строк;
  4. перемещение строк;
  5. заполнение ячеек

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

и прямое обращение к свойствам объекта

Есть и более простой способ добавления в документ таблицы с определенными атрибутами:

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах). Про кроссбраузерную функцию перемещения строк см. сортировка html таблицы средствами JavaScript.

Следующий пример работает только в IE:

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

дополнительно

Как перебрать в цикле все таблицы на странице:

Как перебрать в цикле все ячейки таблицы:

как закрасить строки таблицы через одну:

Спасибо, очень помогло! И про рекламу незабыл!

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Мде
А в файрфоксе moveRow не работает

хуйня этот файрфокс

Почему то не работает setAttribute(«bgcolor»,»#ff0000) для ячеек таблицы TD, созданных с помощью createElement(‘TD’) в Internet Explorer, вообще не могу никак там цвет сделать в таблице…. ( ФФ и ОПера все номрально.

Спасибо за сайт! Очень помог разобраться с форматированием таблиц. Незнаю, ошибка ли это, но вот тут ‘s’ в середине кода лишняя: var t = document.getElementsById(‘t1’); и еще, не разобравшись с: rows[i].className = «odd»; я выбрал способ: rows[i].style.background=»#DDDDFF»;

добрый день,у меня есть форма хтмл, при заполнении которой,после нажатия кнопки, данные идут в базу, а из базы информация поступает в таблицу хтмл, которая расположена ниже этой формы.А мне надо чтобы информация обновлялась динамически по ходу внесения данных в форму, т е еще до нажатия кнопки, подскажите пожалуйста, может мне надо связать таблицу с формой напрямую(не через базу) или может есть какой то другой способ? и стоит ли мне переписать все вычисления с пхп на яваскрипт(для вызова onkeyup)? заранее спасибо!

Javascript Добавить строку в таблицу HTML и индекс увеличения

Это мой первый пост на этом сайте, поэтому, надеюсь, вы легко поймете меня. Я пытаюсь создать форму HTML/PHP и использовать небольшой кусок Javascript для добавления дополнительных строк в таблицу при нажатии кнопки и приращения идентификатора для двух полей.

Кнопка работает при добавлении строк, однако, похоже, она не увеличивает идентификатор, просто используйте тот же идентификатор, что и предыдущая строка. Надеюсь, кто-то может помочь?

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

  • Обновлена ​​кнопка id и name от «button2» до «button1» . Я предположил, что вы хотите, чтобы индексы синхронизировались по входам в каждой строке.
  • Изменение $(window).load(function() < до $("document").ready(function() < . В то время как оба будут работать, первый будет ждать, пока все изображения не закончат загрузку, а последний при пожаре, когда DOM завершит строительство. Если вы не хотите, чтобы изображения сначала загружались, я бы рекомендовал $(«document»).ready() для более быстрого запуска кода.
  • Удаление [0] ссылок — основная причина использования [0] после того, как коллекция селекторов jQuery должна ссылаться на версию DOM выбранного элемента jQuery, чтобы мы «vanilla» JavaScript метод на нем. Во всех случаях вы перематывали переменные в $(. ) , которые только что преобразовали элемент DOM обратно в объект jQuery, так что дополнительный шаг не понадобился.
  • Изменен метод .delegate() на .on() , как отметил Говард Ренолет, это правильный метод для использования в современных версиях jQuery. Обратите внимание, что параметры «event» и «target» заменяют места в on , откуда они находились в delegate .
  • Изменен целевой объект с #button2 на :button — это позволит убедиться, что все кнопки в новых строках также позволят вам добавить дополнительные строки, а не только первый.
  • Переключить цель clone из щелкнутой строки в последнюю строку в таблице. Это поможет сохранить последовательность строк в последовательности и в порядке возрастания. Клонированная строка всегда будет последней, независимо от того, какой из них был нажат, а новая строка всегда будет помещена в конец, после нее.
  • Изменена индексация, чтобы использовать индекс последней строки в качестве базы для новой строки и использовать регулярное выражение для ее определения — теперь, когда упорядоченная таблица всегда учитывается в последней строке иметь наивысший индекс. Используя регулярное выражение /^(.+)(d+)$/i , вы можете разделить значение индекса на «все перед индексом» и «индекс (т.е. На или больше цифр, в конце значения)». Затем вы просто увеличиваете индекс на 1 и снова присоединяете его для нового значения. Использование подхода с регулярным выражением также позволяет легко адаптироваться, оно всегда может быть более 9 строк (т.е. Индексов с двузначными числами).
  • Обновлены атрибуты id и name для каждого ввода. Я предположил, что вы хотите, чтобы атрибуты id и name были одинаковыми для каждого отдельного элемента, на основе в начальной строке, и вы только обновляли id в своем коде, что вызвало бы проблемы при отправке данных.
  • Изменен $(«input:date») на $(«input[type=’date’]) — как заметил Мышелов, это была основная причина, по которой ваш код был неудачным, изначально. Все другие изменения помогут вам избежать дополнительных проблем в будущем или просто связаны с изменением качества кода.
Читать еще:  Arrays tostring java

Итак., это были основные обновления.:) Дайте мне знать, если я неправильно понял, что вы пытаетесь сделать, или если у вас есть какие-либо вопросы.

Эта строка неверна. Он выдает ошибку invalid selector .

Вам нужно изменить его на:

jQuery фактически поддерживает :INPUT-TYPE format в селекторах, но не новые типы ввода HTML5 (пока): поэтому использование input[type=»date»] здесь — правильный способ выбора элемента с типом HTML5. Обратите внимание на цитаты вокруг значения. Если вы хотите выбрать атрибут с определенным значением.

Обзор селекторов селекторов css здесь: W3schools.

Поскольку эта строка выдает ошибку, ваш newIDSuffix никогда не обновляется, потому что script останавливается в строке до этого из-за ошибки script.

@Charlietfl поднимает действительный момент, чтобы узнать больше о классах и обход DOM. Однако это не исправит этот код. Или объясните, почему ваш код не работает. Тем не менее, это хороший совет.

javascript — таблицы — добавление новой строки в таблицу js

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

jQuery имеет встроенное средство для управления элементами DOM на лету.

Вы можете добавить что-нибудь в свой стол следующим образом:

Объект $(‘ ‘) в jQuery является объектом тега, который может иметь несколько атрибутов attr которые можно установить и получить, а также text , который представляет текст между тегом здесь: text .

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

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

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

Вот какой хаккетский код взлома. Я хотел сохранить шаблон строки на странице 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.

PS: Я даю все кредиты команде jQuery; они заслуживают всего. Программирование JavaScript без jQuery — я даже не хочу думать об этом кошмаре.

Для лучшего решения, размещенного здесь, если в последней строке есть вложенная таблица, новая строка будет добавлена ​​во вложенную таблицу вместо основной таблицы. Быстрое решение (рассмотрение таблиц с / без tbody и таблиц с вложенными таблицами):

Если вы используете плагин Datatable JQuery, вы можете попробовать.

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

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

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

Если вы используете мой струнный композитор, вы можете сделать это, как

Вот демонстрация Fiddle

Подход, который вы предлагаете, не гарантированно даст вам результат, который вы ищете — что, если у вас есть tbody например:

Читать еще:  Стандартная ошибка уравнения регрессии

В итоге вы получите следующее:

Поэтому я бы рекомендовал этот подход:

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

Обновление: повторите этот ответ после недавней работы с этим вопросом. безответственность замечает, что в DOM всегда найдется человек; это верно, но только если есть хотя бы одна строка. Если у вас нет строк, tbody не будет, если вы сами не указали его.

DaRKoN_ suggests добавлять к tbody а не добавлять контент после последнего tr . Это затрагивает проблему отсутствия строк, но все же не является пуленепробиваемым, поскольку теоретически вы можете иметь несколько элементов tbody и строка будет добавлена ​​к каждому из них.

Взвешивая все, я не уверен, что есть одно однострочное решение, которое учитывает каждый возможный сценарий. Вам нужно будет убедиться, что код jQuery соответствует вашей разметке.

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

Так что все изменилось с тех пор, как @Luke Bennett ответил на этот вопрос. Вот обновление.

jQuery, так как версия 1.4 (?) автоматически определяет, будет ли элемент, который вы пытаетесь вставить (используя любые методы append() , prepend() , before() или after() ), является

Так что да, ваш примерный код является приемлемым и будет отлично работать с jQuery 1.4+. 😉

Что делать, если у вас есть

Затем он вставляет новую строку в нижний колонтитул, а не в тело.

Следовательно, лучшим решением является включение

Чтобы добавить хороший пример в эту тему, это рабочее решение, если вам нужно добавить строку в определенную позицию.

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

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

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

Я думаю, я сделал в своем проекте, вот он:

HTML

JS

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

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

если у вас есть другая переменная, вы можете получить доступ в

Таким образом, я надеюсь, что это будет полезно

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

Ответ Нила безусловно самый лучший. Однако все становится очень беспорядочно. Мое предложение состояло в том, чтобы использовать переменные для хранения элементов и добавления их в иерархию DOM.

HTML

JAVASCRIPT

Запись с помощью функции javascript

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

Javascript Добавить строку в таблицу HTML И увеличение ID

Это мой первый пост на этом сайте, так что, надеюсь, вы легко поймете меня. Я пытаюсь создать форму HTML/PHP и использовать небольшой кусок Javascript для добавления дополнительных строк в таблицу при нажатии кнопки и приращения идентификатора для двух полей.Javascript Добавить строку в таблицу HTML И увеличение ID

Кнопка работает при добавлении строк, однако, похоже, она не увеличивает идентификатор, просто используйте тот же идентификатор, что и предыдущая строка. Надеюсь, кто-то может помочь?

для динамического HTML, как это лучше узнать, как использовать классы и DOM траверсы, вместо того, чтобы беспокоиться о необходимости ID на всех. Показать код, который зависит от ID – charlietfl

Кажется, он работает в этом jsFiddle — http://jsfiddle.net/g7116c49/, изменяя ‘.find (‘input: date’)’ to ‘.find (‘input.date’) ‘и добавление’ class = «date» к вашему вводу даты. – Sean

Вы пытались поместить объявление ‘newIDSuffix’ в Global JavaScript вместо функции’ $ (window) .load’? – yW0K5o

ответ

Я пошел дальше, читая версию того, что я думаю, что вы пытаетесь выполнить. Я буду ходить через основные обновления:

  1. Обновлено кнопку id и name от «button2» на «Button1» — Я предполагал, что вы хотели бы сохранить показатели в синхронизации через входы в каждой строке ,
  2. Изменение $(window).load(function() < до $("document").ready(function() < — В то время как любой из них будет работать, первый будет ждать, пока все изображения не закончат загрузку, а последний при пожаре, когда DOM завершит строительство. Если вы не хотите, чтобы изображения сначала загружались, я бы рекомендовал $(«document»).ready() , для более быстрого запуска кода.
  3. Снятие [0] Ссылки на — основную причину использования [0] после сбора селектора JQuery является ссылаться на версию DOM выбранного элемента JQuery, чтобы нам «ваниль» JavaScript метод на нем. Во всех случаях вы перематывали переменные в $(. ) , которые только что преобразовали элемент DOM обратно в объект jQuery, так что дополнительный шаг не требовался.
  4. Изменил метод .delegate() на .on() — как отметил Говард Ренолле, это правильный метод для использования в современных версиях jQuery.Обратите внимание, что параметры «event» и «target» поменялись местами в on , откуда они находились в delegate .
  5. Изменен: цели с #button2 по :button — это гарантирует, что все кнопки в новых строках также позволят вам добавить дополнительные строки, а не только первую.
  6. Коммутатор цели clone от нажатой строки до последней строки в таблице — это поможет сохранить нумерацию строк в последовательности и в порядке возрастания. Клонированная строка всегда будет последней, независимо от того, какой из них был нажат, а новая строка всегда будет помещена в конец, после нее.
  7. Изменен индекс, чтобы использовать индекс последней строки в качестве базы для новой строки и использовать регулярное выражение для его определения. — теперь, когда упорядоченная таблица всегда рассчитывается на последнюю строку с наивысшим индексом , Используя регулярное выражение /^(.+)(d+)$/i , вы можете разделить значение индекса на «все до индекса» и «индекс (т. Е. На или больше номеров, в конце значения)». Затем вы просто увеличиваете индекс на 1 и снова присоединяете его для нового значения. Использование подхода с регулярным выражением также позволяет вам легко адаптироваться, он когда-либо будет иметь более 9 строк (т. Е. Двузначные индексы).
  8. Обновлен оба id и name атрибутов для каждого входа — Я предполагал, что вы хотите, чтобы id и name атрибутов быть одинаковыми для каждого отдельного элемента, на основе исходного ряда, и, вы только обновление id в вашем коде, что вызвало бы проблемы при отправке данных.
  9. Изменен $(«input:date») до $(«input[type=’date’]) — как указывал Мышельник, это была основная причина, по которой ваш код был неудачным, изначально. Все другие изменения помогут вам избежать дополнительных проблем в будущем или просто изменить «качество кода».
Читать еще:  Работа с бд java

So. , , это были основные обновления. 🙂 Дайте мне знать, если я неправильно понял, что вы пытаетесь сделать, или если у вас есть какие-либо вопросы.

И теперь вы собираетесь обвинить его за «1 миллион долларов» ** * мизинец пальца до его рта *** – Mouser

LOL. , , он сделал хороший выстрел. , , подумал, что я помогу ему немного. 😉 – talemyn

@talemyn вы, сэр, мой герой. Я не могу поблагодарить вас за это, он работает отлично и именно то, чего я пытаюсь достичь. –

Эта строка не является правильным. Он выдаст ошибку invalid selector .

Вы должны изменить его на:

JQuery на самом деле поддерживает :INPUT-TYPE format в селекторы, но не новые типы ввода HTML5 (еще): так что использование input[type=»date»] здесь правильный путь сейчас, чтобы выбрать элемент с типом HTML5. Обратите внимание на цитаты вокруг значения. Если вы хотите выбрать атрибут с определенным значением.

Обзор селекторов селекторов css здесь: W3schools.

Поскольку эта строка выдает ошибку, ваш newIDSuffix никогда не обновляется, потому что сценарий останавливается в строке до этого из-за ошибки сценария.

@Charlietfl поднимает действительный пункт о получении дополнительной информации о классах и DOM обходе. Однако это не исправит этот код. Или объясните, почему ваш код не работает. Тем не менее, это хороший совет.

Правильно, ваш ответ немного вводит в заблуждение в объяснении. jQuery фактически поддерживает формат ‘: INPUT-TYPE’ в селекторах, но не новые типы ввода HTML5 (пока): http://api.jquery.com/category/selectors/form-selectors/ Если он пытался обновить кнопка в форме, например, ‘.find (» input: button «)’ или даже ‘.find («: button «)’ будет работать нормально. Несмотря на то, что селектора css и селектора jQuery имеют некоторые отличия. – talemyn

@talemyn, спасибо за обновление. Обновленный мой ответ, чтобы соответствовать вашему комментарию, так что это технически правильно. – Mouser

Ссылка на основную публикацию
Adblock
detector