Elettracompany.com

Компьютерный справочник
3 просмотров
Рейтинг статьи
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

Я просто делаю упражнение Javascript, которое должно добавить строку в таблицу. Html читается примерно так:

И мой сценарий который не работает:

Это правильное решение:

Я хотел бы понять, что не так с моим первым решением? Почему он не создает тег, а вместо этого выдает ошибку?

4 Ответов

Вы никогда не добавляете строку в таблицу. createElement ни к чему не привязывается. Вам нужно будет использовать appendChild() или insertBefore()

ваш xTable.createElement не создает никакого дочернего элемента. Фактический метод — document.createElement() . Там нет element.createElement

опять же parentnode.children имеет доступ только к элементам, которые являются прямыми дочерними элементами элемента таблицы, который является элементом tBody . Итак, parentnode.children.length здесь равно 1. Но он будет увеличиваться после добавления другого элемента tr, так как он не был добавлен к элементу tbody . Таким образом, это делает цикл for бесконечным . Я скоро об этом расскажу

кроме того, вы должны использовать метод element.appendChild() , чтобы appedn ребенка вы уже создали. Для добавления ячеек таблицы не используйте innerHTML, скорее используйте методы dom, чтобы сделать это за

Цикл for в вашем коде становится бесконечным , потому что после добавления одного элемента tr в таблицу xTable.children.length увеличивается на one.So, каждый раз, когда цикл for выполняется, он обнаруживает, что длина увеличивается, и после добавления другого элемента tr он снова увеличивается. Таким образом, он никогда не получает никакого шанса разорвать .Thus стать бесконечным циклом. Поэтому будьте осторожны при использовании цикла for для добавления элемента в таблицу

Первая ошибка при выполнении заключается в том, что вы пытаетесь вызвать xTable.createElement . У узлов элементов есть метод createElement ; у узлов документов есть, поэтому вам нужно будет использовать document.createElement(‘tr’) вместо этого. И вам нужно присвоить его возвращаемое значение переменной, чтобы сделать что-нибудь с вновь созданным элементом.

Кроме того, необходимо добавить элемент в дерево документов. Если вы добавляете его в таблицу, возникает проблема. У вас есть цикл, который пересекает все дочерние элементы таблицы, и добавление нового дочернего элемента сделает цикл бесконечным. Петля На самом деле не нужна вообще. Чтобы найти последнего ребенка, вам не нужно пересекать все дети; вы просто используете свойство children.length . Но вам даже это не нужно; чтобы добавить строку (что вы и делаете здесь, а не вставляете), вы просто вызываете метод appendChild предполагаемого родителя.

Это еще не все. В HTML (строго говоря, только в HTML линеаризации, а не в XHTML линеаризации) элемент tr не является дочерним элементом table . Браузеры будут вставлять элементы tbody , когда это необходимо, так что tr является дочерним элементом tbody , который является дочерним элементом table . Это означает, что значение xTable.children.length равно 1; таблица имеет только один дочерний элемент, элемент tbody .

Читать еще:  Стандартная ошибка коэффициента регрессии

Таким образом, используя подход в вашем первом коде можно правильно закодировать следующим образом:

Столы-это нечто особенное. У них есть специальные (необязательные) методы добавления детей. TABLE имеет insertRow и TR имеет insertCell . Они особенно полезны, если вы хотите добавить строку / ячейку где-то не в конце.

Установка TR ‘ s innerHTML должна работать в большинстве браузеров, но, вероятно, не во всех.

(Если вы создаете целую таблицу, создайте HTML в JS, а затем установите innerHTML . Это гораздо быстрее, чем создавать отдельные TR и TD .)

Похожие вопросы:

Я хочу добавить новую строку в свою таблицу с помощью Javascript, но новая строка должна быть похожа на мои предыдущие строки. Я использую CSS для форматирования моих строк.

Возможные Дубликаты : Добавление строк в таблицу с jQuery Jquery и добавление строки в таблицу. В настоящее время у меня есть таблица, которая имеет одну строку, и с этой строкой таблицы у меня есть.

Я столкнулся с очень маленькой проблемой, которая заняла более двух часов. Я хочу вставить строку в таблицу HTML, а затем отсортировать ее в порядке возрастания. Я посмотрел на этот ответ и подумал.

Я пытаюсь вставить строки в таблицу html с javascript. Я создал таблицу и могу успешно добавлять строки одним нажатием кнопки. Однако я хочу иметь возможность заполнять строки элементами из.

Я хотел бы добавить строку в таблицу с 4 ячейками: indexnumber, firstname, lastname и points. Как новичок в Javascript я complety потерял в textnodes, childs и других элементах Dom. Кто может помочь.

Я извлекаю таблицу, используя jquery следующим образом: var table = $.fn.dataTable.fnTables(true); Я хочу добавить строку в таблицу после последней строки, я пытался: $(tr.

Добавить одну строку в таблицу (html) и удалить ее, используя JavaScript, очень просто. Но можно ли добавить несколько строк, например 2 или более, вызвав функцию addrow только один раз? Добавленные.

Я пытаюсь добавить строки в таблицу в HTML с помощью JavaScript, которые являются интерактивными. Вот мои коды: HTML:

У меня есть таблица для ввода данных, которая имеет AJAX ComboBox и HTML текстовый ввод в каждой строке. Я не смог динамически добавлять строки с ComboBoxes по Javascript, поэтому я сделал кнопку.

Я пытаюсь использовать JavaScript или ASP C# для добавления строк в таблицу в форме, когда пользователь нажимает кнопку добавить строку. У меня есть рабочий код в JavaScript. Я хочу добавить строки.

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’]) — как заметил Мышелов, это была основная причина, по которой ваш код был неудачным, изначально. Все другие изменения помогут вам избежать дополнительных проблем в будущем или просто связаны с изменением качества кода.
Читать еще:  Обобщение и ограничение понятий ошибки

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

Эта строка неверна. Он выдает ошибку 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.

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

Читать еще:  Машинное обучение java

HTML

JS

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

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

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

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

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

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

HTML

JAVASCRIPT

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

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

Задачи на функции работы со строками в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

  • Урок №
    Введение, задач нет
  • Урок №
    Работа с регулярными
    выражениями. Глава 1.
  • Урок №
    Работа с регулярными
    выражениями. Глава 2.
  • Урок №
    Работа с регулярными
    выражениями. Глава 3.
  • Урок №
    Работа с регулярными
    выражениям. Глава 4.
  • Урок №
    Отличия
    от PHP версии

Разное

Работа с канвасом

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с canvas
  • Урок №
    Продвинутая
    работа с canvas

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)

Контекст

  • Урок №
    Введение, задач нет
  • Урок №
    Продвинутая
    работа с контекстом

Drag-and-Drop

  • Урок №
    Введение, задач нет
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Перед решением задач изучите теорию к данному уроку.

Примеры решения задач

Задача . Поиск и замена

Задача. Дана строка ‘aaa@bbb@ccc’. Замените все @ на ‘!’ с помощью глобального поиска и замены.

Решение: в данном случае необходимо воспользоваться методом replace, который выполняет поиск и замену. Однако, при простом варианте использования, эта метод найдет и заменит только первое совпадение:

Чтобы заменить все совпадения, воспользуемся глобальным поиском с помощью регулярного выражения:

Задача . Методы substr, substring, slice

Задача. Дана строка ‘aaa bbb ccc’. Вырежите из нее слово ‘bbb’ тремя разными способами (через substr, substring, slice).

Решение: слово ‘bbb’ начинается с символа номер 4 (нумерация с нуля), а заканчивается символом номер 6. Воспользуемся указанными методами:

Обратите внимание на то, что в методах substring и slice второй параметр должен быть на 1 больше того символа, который мы хотим забрать (то есть, если указать число 7 — то отрезание произойдет до 6 символа включительно).

Задача . Преобразование формата даты

Задача. В переменной date лежит дата в формате ‘2025-12-31’. Преобразуйте эту дату в формат ’31/12/2025′.

Решение: с помощью метода split разобьем нашу строку ‘2025-12-31’ в массив по разделителю ‘-‘, при этом в нулевом элементе окажется год, в первом — месяц, во втором — день:

Теперь, обращаясь к разным элементам массива по их ключам, сформируем нужную нам строку:

Задачи для решения

Работа с регистром символов

Дана строка ‘js’. Сделайте из нее строку ‘JS’.

Дана строка ‘JS’. Сделайте из нее строку ‘js’.

Работа с length, substr, substring, slice. Работа с indexOf

Дана строка ‘я учу javascript!’. Найдите количество символов в этой строке.

Дана строка ‘я учу javascript!’. Вырежите из нее слово ‘учу’ и слово ‘javascript’ тремя разными способами (через substr, substring, slice).

Дана строка ‘я учу javascript!’. Найдите позицию подстроки ‘учу’.

Дана переменная str, в которой хранится какой-либо текст. Реализуйте обрезание длинного текста по следующему принципу: если количество символов этого текста больше заданного в переменной n, то в переменную result запишем первые n символов строки str и добавим в конец троеточие ‘. ‘. В противном случае в переменную result запишем содержимое переменной str.

Работа с replace

Дана строка ‘Я-учу-javascript!’. Замените все дефисы на ‘!’ с помощью глобального поиска и замены.

Работа с split

Дана строка ‘я учу javascript!’. С помощью метода split запишите каждое слово этой строки в отдельный элемент массива.

Дана строка ‘я учу javascript!’. С помощью метода split запишите каждый символ этой строки в отдельный элемент массива.

В переменной date лежит дата в формате ‘2025-12-31’. Преобразуйте эту дату в формат ‘31.12.2025’.

Работа с join

Дан массив [‘я’, ‘учу’, ‘javascript’, ‘!’]. С помощью метода join преобразуйте массив в строку ‘я+учу+javascript+!’.

Задачи

Преобразуйте первую букву строки в верхний регистр.

Преобразуйте первую букву каждого слова строки в верхний регистр.

Преобразуйте строку ‘var_test_text’ в ‘varTestText’. Скрипт, конечно же, должен работать с любыми аналогичными строками.

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector
×
×