Как сделать html таблицу с динамическим контентом

Как сделать html таблицу с динамическим контентом

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

How do I create HTML table using jQuery dynamically?

I am trying to create a HTML table like the following dynamically using jQuery:

This is my actual table :

This is the method which will create tr and td elements taking id and labelText :

I also have a value which will be shown as tool tip.

Please help me to create a table dynamically with tool tip and tr td .

EDIT:

I have almost done with the following code:

Here label is coming properly and the input box is not coming and it shows [object Object] where the text box has to come.

When I printed the textInputBox using console.log , I get the following:

[input#nickname, constructor: function, init: function, selector: «», jquery: «1.7.2», size: function…]

What could be the issue?

Thanks to @theghostofc who showed me path. 🙂

5 Answers 5

You may use two options:

1. createElement
2. InnerHTML

Create Element is the fastest way (check here.):

InnerHTML is another popular approach:

There may be other approaches as well. Please use this as a starting point and not as a copy-paste solution.

Edit 2:

IMHO, you are mixing object and inner HTML. Let’s try with a pure inner html approach:

An example with a little less stringified html:

Here is a full example of what you are looking for:

I understand you want to create stuff dynamically. That does not mean you have to actually construct DOM elements to do it. You can just make use of html to achieve what you want .

Look at the code below :

HTML:

JS :

This one does what you want dynamically, it just needs the id and labelText to make it work, which actually must be the only dynamic variables as only they will be changing. Your DOM structure will always remain the same .

Moreover, when you use the process you mentioned in your post you get only [object Object] . That is because when you call createProviderFormFields , it is a function call and hence it’s returning an object for you. You will not be seeing the text box as it needs to be added . For that you need to strip individual content form the object , then construct the html from it.

It’s much easier to construct just the html and change the id s of the label and input according to your needs.

Создание динамических таблиц за секунды из любых данных JSON

Эта статья была рецензирована Стефаном Максом и Саймоном Кодрингтоном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Стандартные таблицы HTML могут быть хорошими, если вы просто пытаетесь расположить некоторые базовые данные, но что, если вы ищете больше из ваших таблиц? Если вам нужно извлечь данные из внешнего API, сделать таблицу сортируемой или редактируемой, то вам понадобится что-то большее, чем просто удар.

Если это звучит знакомо, то Tabulator – это библиотека для вас. Tabulator – это легкий плагин jQuery UI, разработанный для создания сложных интерактивных таблиц, с помощью всего лишь нескольких строк JavaScript, вы можете превратить практически любой источник данных в красиво отформатированную интерактивную таблицу.

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

Создание вашего первого табулятора

Давайте начнем с создания очень простой таблицы.

Поскольку Tabulator является виджетом jQuery, вам необходимо включить библиотеки пользовательского интерфейса jQuery и jQuery из локального источника или CDN по вашему выбору.

Вам нужно будет получить копию библиотеки Tabulator, которую можно клонировать из репозитория GitHub по адресу https://github.com/olifolkerd/tabulator, и включить файлы tabulator.css tabulator.js

Создайте элемент <div>

Давайте превратим этот элемент в Табулятор с некоторым JavaScript:

И вот он, рабочий стол!

Итак, мы еще не совсем там. Чтобы закончить нашу таблицу, нам нужно определить столбцы и загрузить некоторые данные.

Определение столбцов

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

Мы делаем это, передавая массив определения столбца в конструктор Tabulator. Каждый объект в массиве представляет столбец таблицы и содержит его параметры настройки:

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

• title – обязательно для заполнения – заголовок, который будет отображаться в заголовке столбца
• поле – обязательно для заполнения – ключ для столбца в массиве данных
• align – выравнивание текста для столбца (слева | по центру | справа)
• width – ширина столбца (если не установлено, система определит наилучшее соответствие)
• sortable – переключает, может ли пользователь сортировать данные по столбцу
• sorter – Как отсортировать данные в столбце (по умолчанию строка)
• formatter – Как отформатировать данные в столбце (по умолчанию строка)
• onClick – обратный вызов, когда пользователь щелкает ячейку в столбце
• editable – определяет, могут ли эти данные редактироваться пользователем
• редактор – редактор, который будет использоваться, когда ячейка в столбце редактируема
• видимый – Показать или скрыть столбец

Загрузка данных в вашу таблицу

Завершающим этапом создания вашего нового табулятора является загрузка некоторых данных. Для этого есть несколько вариантов, и мы кратко остановимся на каждом из них здесь.

Массив JavaScript

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

Давайте создадим несколько примеров данных:

Затем назначьте его нашей таблице:

Запрос Ajax

Чтобы получить данные в формате JSON из удаленного источника, вы можете передать URL-адрес методу setData

Дополнительные параметры запроса могут быть переданы в объект с URL.

HTML таблица

Вы также можете преобразовать существующую таблицу HTML в табулятор.

Создайте свою таблицу HTML:

Затем вызовите конструктор Tabulator для элемента таблицы, чтобы автоматически извлечь заголовки и данные:

Конечный результат

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

Дополнительные возможности

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

Сортировка

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

Сортировка может быть включена или отключена для каждого столбца с использованием параметра сортировки.

По умолчанию все столбцы сортируются как текст. Вы можете указать другой сортировщик с параметром $ ( «#example-table» ) . tabulator ( <
columns : [
< title : "Name" , field : "name" , sortable : true >, //sorting enabled
< title : "Progress" , field : "progress" , sortable : false >, //sorting disabled
] ,
> ) ;

Доступно несколько встроенных сортировщиков:

• строка – сортирует как строки символов (опция по умолчанию)
• число – Сортирует как числа (целое или с плавающей точкой, также будет обрабатывать числа с использованием разделителей «,»)
• alphanum – сортирует как буквенно-цифровую строку
• логическое – сортирует как логическое
• дата – сортировка по дате

Чтобы определить пользовательский сортировщик, передайте обратный вызов параметру $ ( «#example-table» ) . tabulator ( <
columns : [
< title : "Name" , field : "name" , sortable : true >, //sort as string (default)
< title : "Progress" , field : "progress" , sortable : true , sorter : "number" >, //sort as number
] ,
> ) ;
Он должен возвращать разницу между двумя сравниваемыми значениями.

Форматирование

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

Разнообразие встроенных форматеров включены:

• открытый текст – отображение значения ячейки в виде текста. (опция по умолчанию)
• textarea – показывает текст с неповрежденными символами возврата каретки
• деньги – форматирует число в обозначение валюты (например, 1234567.8901 -> 1 234 567,89)
• email – отображает данные как якорь с ссылкой mailto: на указанное значение
• link – отображает данные как якорь со ссылкой на данное значение
• галочка – зеленая галочка, если значение равно (true | ‘true’ | ‘True’ | 1) и пустая ячейка, если нет
• tickCross – зеленая галочка, если значение равно (true | ‘true’ | ‘True’ | 1) и красный крестик, если нет
• звезда – графический рейтинг звезды, основанный на целочисленных значениях
• прогресс – индикатор выполнения, который заполняет ячейку слева направо (используя значения 0-100 в процентах от ширины)

Вы можете установить форматер столбца с помощью параметра var customSorter = function ( a , b , aData , bData ) <
//a and b are the two values being compared
//aData and bData are the row objects for the values being compared (useful if you need to access additional fields in the row data for the sort)

return a — b ; //return the difference between the two values
>

Чтобы определить пользовательский форматер, передайте обратный вызов параметру $ ( «#example-table» ) . tabulator ( <
columns : [
< title : "Progress" , field : "progress" , formatter : "progress" >,
] ,
> ) ;
Обратный вызов должен возвращать HTML, который будет отображаться в ячейке.

фильтрация

Часто бывает, что вам нужно отображать только подмножество данных для ваших пользователей. Вы можете фильтровать данные, используя функцию var customFormatter = function ( value , data , cell , row , options , formatterParams ) <
//value — value of the cell
//data — data for the row the cell is in
//cell — DOM element of the cell
//row — DOM element of the row
//options — options set for this tabulator
//formatterParams — parameters set for the column

return «<div></div>» ; // must return the HTML or jQuery element for the contents of the cell;
>

Функция принимает три аргумента: поле для фильтрации, функцию сравнения (=, <, <=,>,> =,! =, Like) и значение фильтра.

Чтобы выполнить более сложный фильтр, вы можете передать обратный вызов в функцию $ ( «#example-table» ) . tabulator ( «setFilter» , «progress» , «>» , 10 ) ;
Обратный вызов должен возвращать логическое значение, причем значение setFilter

Очистите существующие фильтры с var customFilter = ( data ) <
//data — data for the row being filtered

return data . name == «bob» && data . progress < 50 ; //must return a boolean, true if it passes the filter.
>

$ ( «#example-table» ) . tabulator ( «setFilter» , customFilter ) ;
clearFilter

Редактирование

Одним из основных преимуществ использования Tabulator по сравнению со стандартной таблицей HTML является возможность редактирования данных в таблице.

Доступно несколько предварительно настроенных редакторов:

• ввод – простой текст
• textarea – многострочный текст, позволяет изменять размер строки по размеру, чтобы соответствовать тексту при вводе
• число – числа с кнопками увеличения и уменьшения
• галочка – флажок
• звезда – рейтинг звезды (можно использовать клавиши со стрелками влево / вправо и ввести для выбора, а также мыши)
• прогресс – индикатор выполнения (можно использовать клавиши со стрелками влево / вправо и ввести для выбора, а также мышь)

Столбцы могут быть установлены как редактируемые с помощью editable

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

Чтобы определить пользовательский редактор, передайте обратный вызов параметру editor Он должен вернуть элемент редактора, который будет отображаться в ячейке. Возвращение false

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

Полнофункциональный пример

Если мы объединим все уроки, которые мы выучили выше, мы сможем создать многофункциональную интерактивную таблицу.

Верхушка айсберга

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

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

• Группировка строк
• Подвижные строки и столбцы
• пагинация
• CSS стилизация и тематика
• Прогрессивный рендеринг для больших наборов данных
• Постоянный макет столбца (сохраняет пользовательские настройки в куки)
• Обратные вызовы на каждом этапе рендеринга таблиц и любого типа взаимодействия с пользователем

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

Создание динамической HTML-таблицы с помощью JavaScript

В этом руководстве вы узнаете, как создать динамическую таблицу HTML с помощью Javascript и манипуляции с объектной моделью документа (DOM). Количество строк таблицы и содержимое ячеек зависит от ваших данных.

В этом руководстве я буду создавать табло для видеоигры Javascript, и данные будут поступать из запроса на выборку. Источник данных для вашего приложения может быть другим, но логика все равно должна применяться. Это руководство будет включать снимки экрана для кода, рендеринга веб-сайта и полного HTML на каждом этапе обучения.

Код, удобный для копирования и вставки, находится в конце. ��

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

Теги таблиц HTML:

Таблица HTML состоит из одного элемента <table> и одного или нескольких элементов ‹tr›, ‹th› и ‹td›.

Эта таблица HTML также будет включать дополнительные элементы ‹thead› и ‹tbody› для дополнительных параметров стиля.

Определения тегов:

Тег <table> определяет таблицу HTML.

Тег <tr> определяет строку в таблице HTML.

Тег <th> определяет ячейку заголовка в таблице HTML.

Тег <td> определяет стандартную ячейку данных в таблице HTML.

Тег <thead> используется для группировки содержимого заголовка в таблице HTML.

Тег <tbody> используется для группировки содержимого тела в таблице HTML.

Мы будем создавать все теги, которые определены выше, с помощью метода документа document.createElement (tagName), и мы добавим их к тегу ‹div› в нашем html-файле.

Большинство «classNames», которые вы увидите в коде, используются для стилизации и являются необязательными.

Стиль CSS обсуждаться не будет, но он будет доступен для ознакомления и тестирования самостоятельно.

Учебник:

‹Div›, который будет содержать нашу таблицу, выглядит следующим образом:

Шаги по созданию таблицы:

• Найдите блок Scoreboard с помощью метода документа document.querySelector (selectors).
• Создайте массив строк, содержащий значения заголовков для данных, которые вы хотите отобразить. Я считаю, что это более репрезентативные данные, которые я собираюсь отображать, и это позволило мне включить единицы измерения в скобки. (Это необязательный шаг, поскольку вы можете использовать ключи объекта в качестве заголовков)

• Создание ‹table›.
• Создание и добавление элемента ‹thead› в таблицу. Этот ‹thead› содержит первый элемент ‹tr› со всеми 5 строками в переменной tableHeaders, отображаемыми выше как значения внутри соответствующих элементов ‹th› ячеек.
• Создание и добавление элемента ‹tbody› в таблицу. Это позволит нам позже добавить теги ‹tr›, соответствующие каждой записи о счете в нашей таблице результатов.
• Добавление ‹table› к «табло» ‹div›.

• Найдите таблицу HTML, которую мы создали выше, с помощью метода документа document.querySelector (selectors).
• Создайте все строки тела таблицы, которые представляют каждый рекорд. Это будут теги ‹tr›, которые будут содержать тег ‹td› для каждого столбца в вашей таблице. Следующая функция создаст новую строку при получении объекта оценки.

Пример объекта singleScore, который передается в следующую функцию:

Наконец, я упомянул, что этот пример таблицы полагался на выборку для получения своих данных. Вот код для выборки, которая предоставляет все индивидуальные оценки функции «appendScores»:

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