Меню

Скрипт работа с элементами таблицы



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

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

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

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

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

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

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

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

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

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

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

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

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

удалить строку поднять строку опустить
1 удалить строку поднять строку опустить строку
2 удалить строку поднять строку опустить строку

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)? заранее спасибо!

Спасибо! Реально очень ценная информация!

Интересная статейка, даже для меня, человека недавно начавшем изучать js, написано все предельно понятным языком. В общем спасибо!

Просто, кратко, доступно. Спасибо.

Огромное спасибо! Все очень четко и понятно. Давно хотел разобраться с построением таблиц, но хорошей статьи не попадалось. Еще раз спасибо.

Читайте также:  Кто такой кум и кто такая кума Могут ли они быть мужем и женой

Источник

Скрипты в Google spreadsheets

image

Не так давно стал доступен сервис скриптов в таблицах Google для персональных аккаунтов (gmail).
googledocs.blogspot.com/2010/03/apps-script-gallery-for-google.html
Краткое описание
www.google.com/google-d-s/scripts/scripts.html
Кроме этого, непосредственно из таблиц стал доступен сервис публикации скриптов в галерею.

Теперь мы можем создавать скрипты для Google Spreadsheets, загружать готовые, публиковать, обмениваться с другими пользователями.
Скрипты имеют богатый набор возможностей. Мы можем использовать всё управление, доступное в сервисах Google.
www.google.com/google-d-s/scripts/overview.html

Результатом работы скрипта, например, могут быть:

  • новая функция, отсутствующая в стандартном наборе;
  • значение, возвращаемое веб сервисом, в том числе, SOAP, WSDL и другие;
  • управление другими сервисами, например, сайтом, календарем, почтовой рассылкой;
  • автоматическое заполнение таблиц (непосредственное управление нашими spreadsheets);
  • создание пользовательских интерфейсов (custom spreadsheets UI).

Примеры созданных скриптов для применения в неогеографии

Расчет расстояния между точками по большой дуге

Прямое геокодирование
Вернуть KML по названию места

Обратное геокодирование
Вернуть адрес по координатам

Источник

Скрипт работа с элементами таблицы

image

Не так давно стал доступен сервис скриптов в таблицах Google для персональных аккаунтов (gmail).
googledocs.blogspot.com/2010/03/apps-script-gallery-for-google.html
Краткое описание
www.google.com/google-d-s/scripts/scripts.html
Кроме этого, непосредственно из таблиц стал доступен сервис публикации скриптов в галерею.

Теперь мы можем создавать скрипты для Google Spreadsheets, загружать готовые, публиковать, обмениваться с другими пользователями.
Скрипты имеют богатый набор возможностей. Мы можем использовать всё управление, доступное в сервисах Google.
www.google.com/google-d-s/scripts/overview.html

Результатом работы скрипта, например, могут быть:

  • новая функция, отсутствующая в стандартном наборе;
  • значение, возвращаемое веб сервисом, в том числе, SOAP, WSDL и другие;
  • управление другими сервисами, например, сайтом, календарем, почтовой рассылкой;
  • автоматическое заполнение таблиц (непосредственное управление нашими spreadsheets);
  • создание пользовательских интерфейсов (custom spreadsheets UI).

Примеры созданных скриптов для применения в неогеографии

Расчет расстояния между точками по большой дуге

Прямое геокодирование
Вернуть KML по названию места

Обратное геокодирование
Вернуть адрес по координатам

Источник

Работа с таблицами с использованием API JavaScript для Excel

В этой статье приведены примеры кода, в которых показано, как выполнять стандартные задачи для таблиц с использованием API JavaScript для Excel. Полный список свойств и методов, поддерживаемых объектами и объектами, см. в таблице Object Table TableCollection (API JavaScript для Excel) и TableCollection Object (API JavaScriptдля Excel).

Создание таблицы

В примере кода ниже показано, как создать таблицу на листе Sample (Пример). В таблице имеются заголовки, а также четыре столбца и семь строк с данными. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

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

Новая таблица

Новая таблица Excel.

Добавление строк в таблицу

В примере ниже показано, как добавить семь новых строк в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новые строки будут добавлены в конец таблицы. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Читайте также:  Зависимость между тригонометрическими функциями одного аргумента Формулы приведения

Свойство объекта TableRow указывает номер индекса строки в коллекции строк index таблицы. Объект TableRow не содержит id свойства, которые можно использовать в качестве уникального ключа для идентификации строки.

Добавление строк в таблицу из надстройки контента приведет к утечке памяти. См. GitHub выпуск #1415 текущего состояния и дополнительные сведения.

Таблица с новыми строками

Таблица с новыми строками в Excel.

Добавление столбца в таблицу

В примерах ниже показано, как добавить столбец в таблицу. В первом примере показано, как заполнить новый столбец статическими значениями, во втором — как заполнить новый столбец формулами.

Свойство index объекта TableColumn указывает номер индекса столбца в коллекции столбцов таблицы. Свойство id объекта TableColumn содержит уникальный ключ, идентифицирующий столбец.

Добавление столбца, содержащего статические значения

В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен после всех существующих столбцов в таблице. Он будет содержать заголовок Day of the Week (День недели), а также данные для заполнения ячеек в столбце. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица с новым столбцом

Таблица с новым столбцом в Excel.

Добавление столбца, содержащего формулы

В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен в конец таблицы, будет содержать заголовок Type of the Day (Тип дня), и в нем будет использована формула для заполнения каждой ячейки столбца. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица с новым столбцом, содержащим вычисленные значения

Таблица с новым вычисляемой колонкой в Excel.

Resize a table

Надстройка может изменять объем таблицы без добавления данных в таблицу или изменения значений ячейки. Чтобы повторно использовать таблицу, используйте метод Table.resize. В следующем примере кода показано, как сделать таблицу повторной. В этом примере кода используется Раздел ExpensesTable из раздела Создание таблицы ранее в этой статье и задает новый диапазон таблицы A1:D20.

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

Таблица после повторного

Таблица с несколькими пустыми строками в Excel.

Изменение имени столбца

В примере кода ниже показано, как изменить имя первого столбца в таблице на Purchase date. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица со столбцом с новым именем

Таблица с новым именем столбца в Excel.

Получение данных из таблицы

В примере кода ниже показано, как считать данные из таблицы ExpensesTable (Таблица расходов), размещенной на листе Sample (Пример), а затем отобразить эти данные под таблицей на том же листе.

Таблица и выведенные данные

Таблица данных в Excel.

Обнаружение изменений данных

Возможно, надстройке потребуется реагировать на изменения пользователями данных в таблице. Чтобы обнаружить эти изменения, можно зарегистрировать обработчик событий для события onChanged таблицы. Обработчики события onChanged получают объект TableChangedEventArgs при возникновении события.

Объект TableChangedEventArgs предоставляет сведения об изменениях и источнике. Так как событие onChanged возникает при изменении формата или значения данных, может быть полезно, чтобы надстройка проверяла, действительно ли значения изменились. Свойство details объединяет эти сведения в виде интерфейса ChangedEventDetail. В следующем примере кода показано, как отобразить значения и типы измененной ячейки до и после изменения.

Читайте также:  Краевой угол смачивания Технология измерения контактного угла

Сортировка данных в таблице

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

Данные таблицы, отсортированные по столбцу Amount (Сумма) в порядке убывания

Отсортировали данные таблицы в Excel.

При сортировке данных на листе создается уведомление о событии. Дополнительные сведения о событиях, связанных с сортировкой, и о регистрации обработчиков событий надстройкой в ответ на такие события см. в статье Обработка событий сортировки.

Применение фильтров к таблице

В примере кода ниже показано, как применить фильтры для столбцов Amount (Сумма) и Category (Категория) в таблице. В результате применения фильтров будут отображены только те строки, у которых в столбце Category (Категория) содержится одно из указанных значений, а значения в столбце Amount (Сумма) меньше среднего значения для всех строк.

Таблица данных, в которой применены фильтры для столбцов Category (Категория) и Amount (Сумма)

Данные таблицы фильтруются в Excel.

Удаление фильтров в таблице

В примере кода ниже показано, как удалить все фильтры, примененные к таблице.

Данные таблицы без фильтров

Данные таблицы не фильтруются в Excel.

Получение отображаемого диапазона из отфильтрованной таблицы

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

Автофильтр

Надстройка может использовать объект AutoFilter таблицы для фильтрации данных. Объект AutoFilter является целой структурой фильтра таблицы или диапазона. Все операции фильтрации, описанные выше в этой статье, совместимы с автофильтром. Единая точка доступа упрощает доступ к нескольким фильтрам и управление ими.

В следующем примере кода показана такая же фильтрация данных, как в примере кода выше, но выполненная полностью с помощью автофильтра.

Объект AutoFilter можно также применять к диапазону на уровне листа. Дополнительные сведения см. в статье Работа с листами с использованием API JavaScript для Excel.

Форматирование таблицы

В примере кода ниже показано, как применить форматирование к таблице. В примере показано, как указать различные цвета заливки для строки заголовков, основной части, второй строки и первого столбца таблицы. Сведения о свойствах, которые вы можете использовать для задания формата, см. в статье Объект RangeFormat (API JavaScript для Excel).

Таблица после применения форматирования

Таблица после форматирования применяется в Excel.

Преобразование диапазона в таблицу

В примере кода ниже показано, как создать диапазон данных и преобразовывать его в таблицу.

Данные в диапазоне (перед его преобразованием в таблицу)

Данные в диапазоне Excel.

Данные в таблице (после преобразования диапазона в таблицу)

Данные в таблице Excel.

Импорт данных JSON в таблицу

В примере кода ниже показано, как создать таблицу на листе Sample (Пример), а затем заполнить ее с помощью объекта JSON, который определяет две строки данных. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Источник