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

Tabulator.js — строим интерактивную html-таблицу за 10 минут

Однажды на работе коллега-бекендщик подошел с вопросом. Есть get-запрос, который отдает json с массивом данных. Нужно по ним построить таблицу в браузере. Проект личный, таблица для внутреннего использования, красоты особой не нужно. Главное сделать минимальными усилиями.

Как бы поступил я, обычный jquery-программист? Получил бы данные через $.get, распарсил, прогнал массив через шаблонизатор, добавил стили. Работы на пару часов. Если нужна еще сортировка, пагинация и фильтрация, то больше.

Коллега поступил гораздо мудрее и загуглил готовые решения. ЗАГУГЛИЛ. Да, так можно было. И показал результат.

Отрисована симпатичная таблица с данными, с сортировкой и фильтрацией. В 20 строк кода. Всю эту красоту делает библиотека tabulator.js. Я был впечатлен. Сам виджеты опросов и рейтингов делаю, а тут такая вещь очевидная. Не приходило в голову, что для построения таблиц наверняка есть готовые решения. Но это урок на будущее, а пока я об этом узнал и расскажу подробнее вам.

Итак, библиотека tabulator. Вот сайт — tabulator.info. Сайт по не-русски, но мышайтишники, разберемся. А если вам разбираться лениво, да и букв там много, то покажу на примере и картинках, как библиотека работает. Пойдем по тому же пути, что проделал коллега.

Есть у меня одна апишечка. Отдает json с массивом популярных статей в блоге. Хочу этот список показать. Для начала вот сама апишечка — https://cp.simpple.ru/api/v1/widgets/ratings/753bf174295992b3ca2d0bd4a78d6598/popular&limit=8. Откройте в браузере, убедитесь, что работает. Видите, там 4 поля: айдишник, заголовок статьи, количество проголосовавших и средняя оценка. Отобразим эту информацию в браузере.

Базовая таблица

Для начала подключим на странице одну css и две js, в том числе jquery — tabulator без нее не работает.

Можно скачать исходники с сайта либы, я же подключал с cdn, чтобы лишний раз файлы не таскать.

Читать еще:  Javascript trim string

Затем в html поставим пустой див, где и отрисуем таблицу

И еще один js-файлик, где зададим настройки табулятора.

В файлике tabulator.js сначала пишем заготовку

В табуляторе можно напрямую указать url, куда сама либа будет ходить аяксом. Но у меня это не сработало, либа заругалась на кроссдоменные запросы. Поэтому пришлось добавить прослойку в виде $.get. Но не суть. Самое интересное внутри. Для инициализации беру код из доки. Только названия полей ставлю нужные

Настройки колонок понятные: заголовок, название поля field (совпадает с полем в json-массиве), ширина и выравнивание. И formatter — классная штука, вариантов форматирования много, я взял progress как в доке. Обновляем страницу и видим это Красота! 10 строчек кода и море удовольствия: и таблица, и сортировки, и даже симпатичный прогрессбар. Без усилий мы сделали таблицу, которую врукопашную кодили бы пару часов.

Добавляем ссылки

Разбираемся дальше. Я хочу не просто показать заголовки статей, а дать ссылки на них. Настройка formatter может быть не только текстом или прогрессбаром. Но также и функцией, которая возвращает любые строки. Добавим в нашу таблицу новое скрытое поле id, а в существующем title напишем функцию formatter

Зачем лишнее поле id? Оно используется для формирования ссылки в другой колонке таблицы. Поэтому приходится id добавить, чтобы потом вытащить из объекта data = cell.getData(). Уберем колонку — и из data поле id пропадет. Обновляем страницу и смотрим на ссылки.

Идем дальше. А не добавить ли в таблицу пагинацию?

Пагинация

Это очень просто. В настройках сразу после layout: ‘fitColumns’ добавим еще 2 пункта.

И в апишном запросе изменим limit=8 на 30. Чтобы получить больше данных и сделать пагинацию интереснее. Вот что получилось Чувствуете, как круто? Реализовывать пагинацию собственными лапками то еще удовольствие. Вот здесь мы уже делали Постраничная навигация по товарам в интернет-магазине. А в табуляторе это 2 строки.

Дальше вообще идет магия.

Дизайн

Таблицу можно как угодно стилизовать. А можно не как угодно, а по-бутстраповски. Для этого подключим еще один файлик со стилями

Смотрим Уже гораздо круче. Bootstrap4, все дела. И пагинация приличнее стала. Такой вариант уже не то что в админке держать, а и людям не стыдно показать.

И последнее, что сегодня замутим. Добавим кастомную колонку «Рейтинг статьи». По скриншотам Вы видели, что статьи сортируются по количеству голосов и средней оценке. Но статья, которой 3 человека поставили пятерку, ценнее статьи, которой четверо поставили трояк, согласны? 3 * 5 > 4 * 3. Арифметика. Поэтому введем самую полезную колонку таблицы Рейтинг = Количество голосов * Средняя оценка

Как работает formatter, мы уже знаем. Появилась еще новая функция sorter. Выглядит диковато, но на первый взгляд. Берем два сравниваемых значения (value = count * rating) и возвращаем их разницу. Кастомные сортировки работают по такому принципу, углубляться не будем.

Напоследок добавим еще пару штрихов:
1. tooltip: true в колонке с прогрессбаром. Чтобы при ховере показалось число голосов
2. initialSort: [< column: 'rating', dir: 'desc' >] — сразу после настроек пагинации, чтобы таблица по дефолту сортировалась по убыванию рейтинга. Сверху самые классные статьи.
И итоговый скрин

Живой пример

А теперь на фиг картинки, посмотрим, что получилось уже в действии. Там не скриншоты, все кликается, сортируется, ссылки активны.

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

Мне эта табличка нравится. Конечно, и раньше смотрел, как читатели ставят оценки, но такой наглядной картины не было. Думаю, буду использовать такие таблички чаще.

И это еще я только чуточку библиотечку тронул. А там ведь есть и фильтры, и разные варианты форматирования. Колбеки и обмен данными с сервером. Можно даже добавлять новые строки в таблице и отправлять их бекенду, чтобы записать в базу. Красота.

Заключение

Куда такую таблицу можно прикрутить? Да навскидку:

1. Посещаемость статей
2. Список заказов в админке интернет-магазина
3. Список товаров в админке.
4. Логи или список событий. Здесь нужно будет запариться с серверной пагинацией, не все ж данные на клиент сразу тащить. Но это проще, чем целиком делать руками.
5. Здесь будет ваша фантазия

Создание таблицы с помощью javascript

  • roman
  • Автор темы
  • Не в сети
  • Модератор

var new_table= document.createElement(‘table’);
new_table.id=’i_user_table’; //Задаете уникальный id таблицы
document.body.appendChild(new_table);

Читать еще:  Как узнать длину arraylist в java

2. Добавление/удаление столбцов и/или строк.
Для вставки строк используется метод insertRow(), ячеек — insertCell():
Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell().
Так же для добавления можно использовать элемент createElement() с атрибутом tr (для добавления строки) и td (для добавления ячейки).
Пример 2.

var newRow=new_table.insertRow(0);
var newCell = newRow.insertCell(0);
newCell.innerHTML=»строка 1 столбец 1″;
var newCell = newRow.insertCell(1);
newCell.innerHTML=»строка 1 столбец 2″;

var newRow=new_table.insertRow(1);
var newCell = newRow.insertCell(0);
newCell.innerHTML=»строка 2 столбец 1″;
var newCell = newRow.insertCell(1);
newCell.innerHTML=»строка 2 столбец 2″;

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

  • roman
  • Автор темы
  • Не в сети
  • Модератор
  • Сообщений: 147
  • Репутация: 1
  • Спасибо получено: 0

function user_table(i_row, i_cell,i_ID) <
// i_row — строчки
// i_cell — столбцы
var tbl = document.createElement(‘table’);
tbl.id=i_ID;
var tblBody = document.createElement(«tbody»);
for (var i=0; i
Далее данная функция должна быть вызвана в коде Вашей программы и таблица добавлена в иерархическую структуру документа.
Пример 1

var new_table=user_table(1, 3, «new_table»);
document.body.appendChild(new_table);

или в определенное место в документе, например, в элемент с ID: ‘modal-body’.
Пример 2

var new_table=user_table(1, 3, «new_table»);
document.getElementById(‘modal-body’).appendChild(new_table);

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

  • roman
  • Автор темы
  • Не в сети
  • Модератор
  • Сообщений: 147
  • Репутация: 1
  • Спасибо получено: 0

var table = document.getElementById(«id_table»);
for (var r = 0; r
Функция getElementById возвращает коллекцию элементов с заданным id.
Представленный пример создает цикл по каждой строчке (

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

  • roman
  • Автор темы
  • Не в сети
  • Модератор
  • Сообщений: 147
  • Репутация: 1
  • Спасибо получено: 0

var table = document.getElementById(«id_table»);
var tr = table.getElementsByTagName(«tr»);
for (var r=0; r

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

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

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

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

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

  • jQuery : небольшая библиотека JavaScript , включающая в себя обширный функционал, который позволяет упростить управление DOM , обработку событий, анимацию и реализацию В том числе и с помощью jquery datatables .
  • Pusher : Бесплатный, простой в использовании realtime pub / sub сервис. Он позволяет реализовать обработку данных в режиме реального времени с помощью основных событий.
  • DataTables : jQuery -плагин для дополнения элементов управления в любую HTML–таблицу .
  • Bootstrap : интерфейс для разработки адаптивных проектов.

На приведенном ниже изображении продемонстрировано, что мы собираемся создать:

Настройка таблиц данных с помощью jquery datatables

DataTables запускается в приложении просто. Все, что нам нужно сделать, это включить JavaScript и CSS-файлы DataTables на HTML-странице .

Существует множество других плагинов для расширения набора функций DataTables , но в основном мы будем использовать эти два файла.

DataTables – это jQuery — плагин, для его работы необходима библиотека jQuery . Чтобы подключить DataTables на странице, мы используем на HTML-странице следующие ссылки:

А приведенные ниже ссылки должны размещаться в конце элемента

непосредственно перед его закрывающимся тегом:

Примеры использования jquery datatables

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

Чтобы создать шаблон таблицы, вставляем элемент таблицы на страницу и с помощью jQuery добавляем к нему метод DataTable . Это позволяет инициализировать все встроенные функции DataTables . Метод DataTable принимает объект в качестве аргумента. Объект содержит свойство data, которое принимает [dataSet](https://github.com/christiannwamba/pusher-realtime-jquery-datatable/blob/master/data.js) , массив данных, которые собираемся отображать в таблице.

Мы также включаем свойство columns , и устанавливаем его значение в массив объектов с каждым значением объекта, служащим заголовком столбца таблицы.

Набор данных хранится в другом JavaScript-файле и должен быть импортирован перед указанным выше JS-файлом :

Добавление новых записей в таблицу

Чтобы добавить в таблицу новые записи, сначала создаем на странице форму с допустимыми параметрами. Затем приступаем к созданию в JavaScript-файле метода с именем buildForm() . Используя jQuery , обеспечиваем, чтобы buildForm() возвращал значение каждого параметра формы, исходный код, которой приведен ниже.

Затем продолжаем создавать метод buildForm() :

Метод addRow() служит для добавления любых данных, возвращаемых buildForm() :

Методы row.add() и .draw() являются встроенными API-интерфейсами DataTables . Также в addRow() реализованы другие методы DataTables : .show() , . draw(false) и .node() :

  • add() добавляет новую строку в таблицу;
  • .draw() заново воссоздает и обновляет таблицу в текущем контексте;
  • .show() отображает поле в таблице. Это полезно, когда нужно добавить дополнительные поля, но отображать их только при определенных условиях;
  • .draw(false) добавляет новую строку без сброса или искажения текущей страницы;
  • .node() служит по событий, который возвращает элемент DOM для запрошенного поля. Это позволяет DOM манипулировать этим полем.
Читать еще:  Java calendar set

Затем метод addRow() привязываем к кнопке с помощью jQuery-метода .click() . Когда кнопка нажата, addRow() автоматически выполняет свои функции.

Выбор и удаление существующих записей из таблицы

Создадим метод selectRow() , который предназначен для выбора строки в таблице. Метод добавляет к выбранной строке класс selected и удаляет все строки, в которые ранее был добавлен класс selected :

Также создаем метод removeRow() , который предназначен для удаления строк из таблицы. Удаляемая строка — это строка с классом selected :

Затем переходим к привязке selectRow() и removeRow() к соответствующим триггерам событий. Для этого используем jQuery-метод .click() :

Обновление в режиме реального времени с помощью Pusher

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

Клиентская сторона содержит тег

В файле script.js мы создаем метод sendToServer() , в котором выполняем POST-запрос с помощью Axios . В POST-запросе передаем два параметра.

Первый — это URI конечной точки службы, а второй — данные таблицы, которые устанавливаем как значение для вновь созданной константы formData :

Затем мы устанавливаем связь с Pusher , создавая новый экземпляр Pusher . Вставляем бесплатный ключ API , который можно получить от Pusher при регистрации. Чтобы обеспечить шифрование трафика подключения, устанавливаем в приложении для параметра encrypted логическое значение true :

Ключ является частью учетных данных, которые генерируются при создании нового приложения в панели инструментов Pusher . Вы можете создать учетную запись, зарегистрировавшись в сервисе .

Установка Pusher на сервере

Запустите приведенную ниже команду для установки зависимостей сервера:

В результате будет создан файл server.js . Затем инициализируем Express , после чего настраиваем его для поддержки совместного использования ресурсов, закодированного тела и JSON .

После этого создаем новый экземпляр Pusher , который содержит объект с идентификатором приложения, ключом, секретом, кластером и настройками шифрования.

Затем создаем маршрут POST , и в нем используем Pusher для запуска события с именем new-record через канал record :

Чтобы выполнять обновление в таблице в режиме реального времени, в файле script.js ( на стороне клиента ) используем метод Pusher subscribe() для подписки на записи records . Затем определяем функцию обратного вызова, которая привязывает событие new-record , а вместе с ним и данные:

Заключение

Теперь вы сможете с легкостью создавать кросс-платформенные приложения, поддерживающие функцию обновления в режиме реального времени. Также доступны и другие функции DataTables и Pusher , но их использование зависит от потребностей вашего приложения.

Вы можете ознакомиться с документацией DataTables и с документацией Pusher , изучить проект на GitHub .

Дополнение: Настройка Pusher

Зарегистрируйте бесплатную учетную запись Pusher :

Создайте новое приложение, выбрав в боковой панели пункт « Apps» и нажав кнопку « Create New», расположенную в нижней части боковой панели:

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

Вы можете получить свои ключи на вкладке App Keys :

Данная публикация представляет собой перевод статьи « How to build a realtime table with DataTables » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Шустрый

Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет

row.appendChild(cell);
table.appendChild(row);
document.body.appendChild(table);

Но в браузере ничего не выводится? Что ещё надо дописать или что я делаю неправильно?

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71

var table=document.createElement(‘table’);
var tbody = document.createElement(‘tbody’);
var row=document.createElement(‘tr’);
var cell=document.createElement(‘td’);

row.appendChild(cell);
tbody.appendChild(row);
table.appendChild(tbody);
document.body.appendChild(table);

Шустрый

Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет

Шустрый

Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет

И я в неё хочу некоторые строки добавить, а некоторые убрать, убираю я строки кодом:

А как добавить новые строки в эту таблицу?

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

вариант на mootools в как сделать без него

var tbl = $(‘tablefeald’); //получить id таблицы // без moo исп. document.getElementById
var countfeald = tbl.rows.length;
var oRow = tbl.insertRow(countfeald);
var oCell = oRow.insertCell(0);
oCell.set(‘html’,’ ‘); // innerHtml(»);
var oCell = oRow.insertCell(1);
oCell.set(‘html’,’ ‘);
var oCell= oRow.insertCell(2);
oCell.set(‘html’,’ ‘);
var oCell = oRow.insertCell(3);
oCell.set(‘html’,slectOptions);
var oCell = oRow.insertCell(4);
oCell.set(‘html’,’Удалить’);

//передаю в нее this и возрашяюсь к tr
function deleteRowsFeald(_this)<
$(‘tablefeald’).deleteRow(_this.getParent().getParent().rowIndex);
>

при удаление тебе нужно из объекта таблицы вызвать функцию deleteRow и указать номер поля.

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