как сделать таблицу в джава скрипт
Javascript динамическая html таблица
Понадобилось мне в одном проекте на днях сделать html таблицу, которую бы выводил серверный php скипт. Но таблицу не простую, а динамическую. Динамическую в том плане, что нужно было предоставить пользователю возможность править данные в ней. Добавлять и удалять строки, а так же отсылать отредактированные данные на сервер. В данной заметке я опишу процесс создания такой html таблицы, а так же приведу полностью рабочий, прокоментированный листинг.
Внимание! По просьбе уважаемого Павла скрипт был доработан. В результате он стал более функционален. Теперь есть возможность размещать и другие элементы html-формы. Скрипт стал меньше размером. Вдобавок немного изменилась структура данных отправляемая на сервер, на мой взгляд она стала более удобна. К сожалению, если приводить описание скрипта на странице, то нужно полностью переписывать статью, а мне делать этого не охота. Поэтому я залил новый скрипт в свой репозиторий: Динамическая html таблица там так же есть полноценный пример и описание как его использовать и пример как обработать данные на сервере.
Получившаяся в итоге html таблица будет примерно следующей:
Порывшись в Javascript доках, я нашёл всего несколько кроссбраузерных функций, отвечающих стандарту W3C. Используя которые, тем не менее, можно творить с html таблицей всё что угодно:
| Метод | Описание |
|---|---|
| createCaption() | Создает пустой элемент заголовка и добавляет его в таблицу |
| createTFoot() | Создает пустой элемент TFOOT и добавляет его в таблицу |
| createTHead() | Создает пустой элемент THEAD и добавляет его в таблицу |
| deleteCaption() | Удаляет первый элемент caption |
| deleteRow() | Удаляет строку из таблицы |
| deleteTFoot() | Удаляет элемент TFOOT из таблицы |
| deleteTHead() | Удаляет элемент THEAD из таблицы |
| insertRow() | Создает пустую строку и добавляет её в таблицу |
Используя данный инструментарий создадим нашу динамическую html таблицу. Я подумал, что исходная таблица для работы должна быть как можно более естественная. Навроде вот этой:
* Объект конфигурации должен содержать свойства в виде целых чисел:
Динамическая html таблица
Я думаю найти применение данному скрипту вполне возможно.
Вместо ответа на вопрос от пользователя Яна в одном из комментариев приведу простенький пример занесения данных в базу MySQL
Обработать этого монстра мы можем следующим образом:
Таблица с заранее проставляемыми строками
По просьбам трудящихся выкладываю скрипт таблицы с заранее проставляемыми строками:
| Поле 1 | Поле 2 | Поле 3 | Поле 4 |
|---|
Логика серверной стороны может быть такой же как и у таблицы сверху
Нам понадобится вот такой html-каркас:
А вот собственно реализация функции setupTable
Забираем и пользуемся на здоровье
Создание таблицы с помощью JavaScript
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Создание таблицы с помощью запроса
Помогите пожалуйста. Есть запрос: create table tbl1(fld integer); Он создает таблицу в.
Создание таблицы в RT-поле с помощью Notes SaxParserа
в общем написал такой код Sub NewTableHTML (rtitem As NotesRichTextItem) %rem Call.
Вложения
 | Документ Microsoft Office Word.7z (100.5 Кб, 6 просмотров) |
Вложения
 | пример1.txt (1.3 Кб, 19 просмотров) |
| пример2.txt (1.5 Кб, 6 просмотров) |
Мы не программисты, поэтому нам нужно все разжевывать)
Добавлено через 3 минуты
Видите, дело не в том, что много, а в том, что сложным языком написано. Если преподаватель его увидит, он сразу поймет, что дело не моих рук)
Добавлено через 3 минуты
Вот примерно каким языком должно быть написано
Hikari, согласен, с base64 переборщил)
но я уже сделал без него
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Если одну и ту же задачу можно сделать и с помощью CSS и с помощью JavaScript в чем ее луче написать и почему?
Скажите а если одну и ту же задачу можно же сделать и с помощью css и с помощь js например.
Отображение XML с помощью javascript
кто знает каким образом можно отображать xml файл с помощью js в браузере?
Авторизация на сайте с помощью Javascript
Помогите пожалуйста разобраться с регистрацией на сайте через Javascript. Есть такой кусок кода.
Работа с таблицами с использованием API JavaScript для Excel
В этой статье приведены примеры кода, в которых показано, как выполнять стандартные задачи для таблиц с использованием API JavaScript для Excel. Полный список свойств и методов, поддерживаемых объектами и объектами, см. в таблице Object Table TableCollection (API JavaScript для Excel) и TableCollection Object (API JavaScriptдля Excel).
Создание таблицы
В примере кода ниже показано, как создать таблицу на листе Sample (Пример). В таблице имеются заголовки, а также четыре столбца и семь строк с данными. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Чтобы указать имя таблицы, сначала необходимо создать таблицу, а затем задать ее свойство, как показано name в следующем примере.
Новая таблица
Добавление строк в таблицу
В примере ниже показано, как добавить семь новых строк в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новые строки будут добавлены в конец таблицы. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Свойство объекта TableRow указывает номер индекса строки в коллекции строк index таблицы. Объект TableRow не содержит id свойства, которые можно использовать в качестве уникального ключа для идентификации строки.
Добавление строк в таблицу из надстройки контента приведет к утечке памяти. См. GitHub выпуск #1415 текущего состояния и дополнительные сведения.
Таблица с новыми строками
Добавление столбца в таблицу
В примерах ниже показано, как добавить столбец в таблицу. В первом примере показано, как заполнить новый столбец статическими значениями, во втором — как заполнить новый столбец формулами.
Свойство index объекта TableColumn указывает номер индекса столбца в коллекции столбцов таблицы. Свойство id объекта TableColumn содержит уникальный ключ, идентифицирующий столбец.
Добавление столбца, содержащего статические значения
В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен после всех существующих столбцов в таблице. Он будет содержать заголовок Day of the Week (День недели), а также данные для заполнения ячеек в столбце. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Таблица с новым столбцом
Добавление столбца, содержащего формулы
В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен в конец таблицы, будет содержать заголовок Type of the Day (Тип дня), и в нем будет использована формула для заполнения каждой ячейки столбца. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Таблица с новым столбцом, содержащим вычисленные значения
Resize a table
Надстройка может изменять объем таблицы без добавления данных в таблицу или изменения значений ячейки. Чтобы повторно использовать таблицу, используйте метод Table.resize. В следующем примере кода показано, как сделать таблицу повторной. В этом примере кода используется Раздел ExpensesTable из раздела Создание таблицы ранее в этой статье и задает новый диапазон таблицы A1:D20.
Новый диапазон таблицы должен совпадать с исходным диапазоном, а загонщики (или верхняя часть таблицы) должны быть в одной строке.
Таблица после повторного
Изменение имени столбца
В примере кода ниже показано, как изменить имя первого столбца в таблице на Purchase date. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Таблица со столбцом с новым именем
Получение данных из таблицы
В примере кода ниже показано, как считать данные из таблицы ExpensesTable (Таблица расходов), размещенной на листе Sample (Пример), а затем отобразить эти данные под таблицей на том же листе.
Таблица и выведенные данные
Обнаружение изменений данных
Возможно, надстройке потребуется реагировать на изменения пользователями данных в таблице. Чтобы обнаружить эти изменения, можно зарегистрировать обработчик событий для события onChanged таблицы. Обработчики события onChanged получают объект TableChangedEventArgs при возникновении события.
Объект TableChangedEventArgs предоставляет сведения об изменениях и источнике. Так как событие onChanged возникает при изменении формата или значения данных, может быть полезно, чтобы надстройка проверяла, действительно ли значения изменились. Свойство details объединяет эти сведения в виде интерфейса ChangedEventDetail. В следующем примере кода показано, как отобразить значения и типы измененной ячейки до и после изменения.
Сортировка данных в таблице
В примере кода ниже показано, как отсортировать данные по убыванию в четвертом столбце таблицы.
Данные таблицы, отсортированные по столбцу Amount (Сумма) в порядке убывания
При сортировке данных на листе создается уведомление о событии. Дополнительные сведения о событиях, связанных с сортировкой, и о регистрации обработчиков событий надстройкой в ответ на такие события см. в статье Обработка событий сортировки.
Применение фильтров к таблице
В примере кода ниже показано, как применить фильтры для столбцов Amount (Сумма) и Category (Категория) в таблице. В результате применения фильтров будут отображены только те строки, у которых в столбце Category (Категория) содержится одно из указанных значений, а значения в столбце Amount (Сумма) меньше среднего значения для всех строк.
Таблица данных, в которой применены фильтры для столбцов Category (Категория) и Amount (Сумма)
Удаление фильтров в таблице
В примере кода ниже показано, как удалить все фильтры, примененные к таблице.
Данные таблицы без фильтров
Получение отображаемого диапазона из отфильтрованной таблицы
В примере кода ниже показано, как получить диапазон, содержащий данные только из тех ячеек, которые в данный момент отображаются в указанной таблице, и записать значения из этого диапазона в консоль. Метод, как показано ниже, можно использовать для получения видимого содержимого таблицы при применении фильтров getVisibleView() столбцов.
Автофильтр
Надстройка может использовать объект AutoFilter таблицы для фильтрации данных. Объект AutoFilter является целой структурой фильтра таблицы или диапазона. Все операции фильтрации, описанные выше в этой статье, совместимы с автофильтром. Единая точка доступа упрощает доступ к нескольким фильтрам и управление ими.
В следующем примере кода показана такая же фильтрация данных, как в примере кода выше, но выполненная полностью с помощью автофильтра.
Объект AutoFilter можно также применять к диапазону на уровне листа. Дополнительные сведения см. в статье Работа с листами с использованием API JavaScript для Excel.
Форматирование таблицы
В примере кода ниже показано, как применить форматирование к таблице. В примере показано, как указать различные цвета заливки для строки заголовков, основной части, второй строки и первого столбца таблицы. Сведения о свойствах, которые вы можете использовать для задания формата, см. в статье Объект RangeFormat (API JavaScript для Excel).
Таблица после применения форматирования
Преобразование диапазона в таблицу
В примере кода ниже показано, как создать диапазон данных и преобразовывать его в таблицу.
Данные в диапазоне (перед его преобразованием в таблицу)
Данные в таблице (после преобразования диапазона в таблицу)
Импорт данных JSON в таблицу
В примере кода ниже показано, как создать таблицу на листе Sample (Пример), а затем заполнить ее с помощью объекта JSON, который определяет две строки данных. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.
Как создать таблицу с помощью цикла?
Это моя первая попытка использования таблицы:
Но этот код как-то динамически создает кучу элементов tbody. Спасибо за помощь, как я новичок
3 ответа
В качестве альтернативы вы можете создать пустую строку из 22 ячеек, клонировать ее 10 раз, а затем добавить числа к клеткам.
И третий вариант: добавьте ячейки в один цикл, создавая новую строку каждые 22 ячейки.
Это потому, что DOM волшебным образом оборачивает элемент
вокруг строк блуждающей таблицы в вашей таблице, как это предусмотрено. К счастью, вы можете переписать ваш цикл таким образом, чтобы добавить все из этих строк таблицы сразу, а не по одной за раз.Простейшим решением для достижения этой цели было бы сохранить строковую переменную и объединить в нее ваши строки. Затем, после того как вы объедините свои строки в одну строку, вы можете установить innerHTML вашего элемента таблицы на эту строку следующим образом:
Вот JSFiddle, который демонстрирует то, что я только что написал. Если вы проверяете HTML с помощью инструментов разработчика вашего браузера, вы заметите, что одна (и только одна) tbody обернута вокруг всех строк вашей таблицы.
Кроме того, если вам интересно, странно выглядящая функция, которая обволакивает этот код, является просто причудливым способом предотвращения превращения созданных вами переменных в глобальные (потому что они не обязательны). См. этот пост в блоге для получения дополнительной информации о том, как это работает.
Есть много способов сделать это, но один из них, который я нашел полезным, это создать fragment и затем добавить в него все. Это быстро и ограничивает перекрашивание / повторное перетекание DOM из цикла.
Посмотрите на этот пример jsbin.
Вот модифицированный код:
Вы можете изменить все, что вы хотите внутри цикла, но это должно помочь вам начать.
Создать таблицу HTML из объекта JavaScript
Я новичок в JavaScript и хочу отображать массив объектов в HTML.
Формат данных выглядит следующим образом:
Я хочу использовать список с тремя столбцами (идентификатор, имя, релевантность) для их отображения. И идентификатор может увеличиваться с 1 автоматически.
Может кто-нибудь сказать мне, как написать код JavaScript для его отображения?
Пожалуйста, дайте мне некоторые материалы или примеры для изучения.
7 ответов
Здесь функция для построения таблицы из любой коллекции (массив объектов)
Это может быть просто сделано небольшим и умным процессом:
Вы можете сделать что-то вроде этого:
Выполните итерацию по списку и извлеките данные для каждого элемента следующим образом (при условии, что ваши данные находятся в переменной, называемой data):
Затем сделайте что-нибудь с переменными в каждом цикле, распечатайте их как хотите.
Array.map () в сочетании с литералами шаблона очень удобен для визуализации HTML-разметки в Javascript для масштабируемых объектов:
Если случай вложенной структуры (объекты внутри объекта), obj2htmltable () может вызвать себя рекурсивно:
Я не совсем уверен, что вы просите. Заголовок вашего сообщения выглядит так, как будто вы ищете JSON.stringfy, как упомянуто в предыдущем ответе, но, по-видимому, это не так.
Вы пытаетесь создать и список HTML,? Можете ли вы попытаться объяснить свою потребность еще раз? Я сомневаюсь, что то, что вы пытаетесь сделать, является сложным, и я уверен, что мы можем помочь вам, если вы дадите немного больше деталей и цели того, что вы пытаетесь сделать.
Я собираюсь догадаться, что вы пытаетесь отобразить HTML, зацикливая свой JSONobject. Попробуйте этот чистый пример JavaScript: