Как объединить ячейки динамически созданной таблицы javascript
Перейти к содержимому

Как объединить ячейки динамически созданной таблицы javascript

  • автор:

Как отсортировать данные в динамически созданной таблице?

У меня есть динамически созданная таблица, которую я заполнил данными из массива объектов. Мне нужно чтобы при клике на кнопку вызывалась функция сортирующая данные и перезапишет в столбец их. Как такое реализовать? Или возможно есть лучший способ отсортировать данные в столбце.

const sortButton = document.querySelector(".sort_btn"); const sortname = document.querySelector("#name"); sortButton.onclick = function (e) < let targetItem = e.target; for (let i of arr) < if (targetItem.closest("#sort_name")) < Sorting(arr, "name", 1); sortname.innerHTML = `$ `; > > >;
  • Вопрос задан более года назад
  • 71 просмотр

1 комментарий

Простой 1 комментарий

Boris @Boria321 Автор вопроса
Функция сортировки:

function Sorting(arr, sortBy, direction) < switch (sortBy) < case "age": return arr.sort((a, b) =>(a.age > b.age ? direction : -direction)); case "name": return arr.sort((a, b) => (a.full_name > b.full_name ? direction : -direction)); case "b_day": return arr.sort((a, b) => (a.b_day > b.b_day ? direction : -direction)); case "country": return arr.sort((a, b) => (a.country > b.country ? direction : -direction)); default: return "missing parametr"; > >

Решения вопроса 1

Dr_Elvis

В гугле забанен
Я использую вот такой скрипт для сортировки таблицы

function sorttbl(head, selector, numrow, dtype) < let table, rows, switching, i, x, y, xx, yy, shouldSwitch, dir, switchcount = 0; table = document.querySelector(selector); switching = true; dir = "asc"; while (switching) < switching = false; rows = table.rows; for (i = head; i < (rows.length - 1); i++) < shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[numrow]; y = rows[i + 1].getElementsByTagName("TD")[numrow]; if (dtype == "num") < xx = parseFloat(x.innerHTML); yy = parseFloat(y.innerHTML); >else < xx = x.innerHTML.toLowerCase(); yy = y.innerHTML.toLowerCase(); >if (dir == "asc") < if (xx >yy) < shouldSwitch = true; break; >> else if (dir == "desc") < if (xx < yy) < shouldSwitch = true; break; >> > if (shouldSwitch) < rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; >else < if (switchcount == 0 && dir == "asc") < dir = "desc"; switching = true; >> > >

Далее где нужно вешаю вызов функции(обычно на заголовках таблицы).
Поясню параметры:
head — если таблица имеет заголовок, то ставим 1, иначе 0
selector — селектор CSS для таблицы который нужно сортировать, именно для тега table
numrow — номер столбца по которому будет сортировка в таблице, начинается отсчет с 0
dtype — тип данных в столбце. если цифры, то ставим ‘num’ , если текст, то ‘text’

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

Подскажите пожалуйста, как с помощью JS можно сделать динамическое редактирование ячеек HTML таблицы? Суть в чем, данные в таблицу заполняются из БД, и мне бы хотелось сделать так, что бы не заходя в БД я мог редактировать ячейки (которые записывались в БД). Ну знаете, как при работе с phpMyAdmin, 2 раза кликаешь на ячейку, редактируешь значения, затем жмешь Enter или в любом другом месте и все сохраняется.

Отслеживать
Stanislav Tataren
задан 17 авг 2021 в 16:31
Stanislav Tataren Stanislav Tataren

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

  1. Вешаете обработчик blur события на елемент
  2. Добавляете данные
  3. Сработало событие — аяксом передаёте данные на сервер
  4. На сервере сохраняете

Отслеживать
ответ дан 17 авг 2021 в 16:45
Alex Khonko Alex Khonko
406 4 4 серебряных знака 12 12 бронзовых знаков

а как передавать даные на сервер, есть примеры? Или еще лучше, подскажите пожалуйста каким должен быть обработчик php для сохранения контента ячеек в БД

17 авг 2021 в 16:54

с php я перегнул. Вы отправляете данные на сервер. Сервер работает на любом нужном вам ЯП. Передача данны — гуглите jquery ajax. Серверный обработчик — скрипт, который принимает запрос, записывает в бд. Это базовые вещи, я могу вам подсказать только направление. Код пишите сами

17 авг 2021 в 16:57

окей, подскажите тогда направления к развязке по поводу БД, я раньше работал но немогу понять как записать для нужной ячейки

Добавление динамических свойств в объект JavaScript

Чтобы новому свойству ‘newKey’ объекта obj присвоить значение ‘newValue’ , достаточно создать его и установить необходимое значение. Замените ‘newKey’ на любое значение переменной или строку для того, чтобы задать динамическое имя свойства.

Вычисление динамических свойств с использованием ES6

Скопировать код

const variable = 'dynamicKey'; // Вычисляем имя свойства из переменной const obj = < [variable]: 'dynamicValue' >;

Синтаксис вычисляемых свойств, предоставленный нам ES6, — это настоящий прорыв! Он позволяет создавать объекты с несколькими динамическими свойствами и делает литералы объектов более выразительными, когда названия свойств требуется получить из выражений.

Внедрение выражений с использованием шаблонных литералов

Скопировать код

const uniqueId = Date.now(); // Используем шаблонные литералы для формирования названий с присвоением уникальных имен свойств const obj = < [`Camel_$`]: 'Бежит быстрее с уникальным идентификатором!' >;

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

Настройка свойств с помощью Object.defineProperty()

Скопировать код

let obj = <>; // Настраиваем свойства с элегантностью через Object.defineProperty() �� Object.defineProperty(obj, 'newKey', < value: 'newValue', writable: true, // Свойство доступно для записи, можете почувствовать себя Шекспиром! enumerable: true, configurable: true >);

Object.defineProperty() предоставляет вам необходимые инструменты, чтобы тонко настраивать свойства и контролировать их поведение.

Новый хранитель порядка

Скопировать код

// При использовании eval() вы всегда рискуете встретиться с проблемами. ��‍♂️ // eval("obj." + userInput + " = 'value'") — это ненадёжный подход

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

Отметка за универсальность

JavaScript – это язык, который предлагает возможность динамического добавления свойств, позволяя легко адаптироваться к изменениям и мгновенным пользовательским вводам. Для создания мощного и надёжного кода освойте точечную и скобочную нотации, синтаксис вычисляемых свойств и возможности Object.defineProperty() .

Визуализация

Представьте себе конструктор (��️), в который можно добавлять блоки с индивидуально нанесёнными этикетками:

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

Author24 — интернет-сервис помощи студентам

добавляет строки с полями.
Вопрос, как объединить эти два скрипта для работы над одной таблицей(естественно в ячейках таблицы буду текстовые поля)?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Динамическая таблица
Ребят,дали такое задание: По заполненной экзаменационной ведомости (таблица: фамилия студента –.

Динамическая таблица на JavaScript
Добрый день, нужна ваша помощь =( Мне нужно сделать динамическую таблица с двумя импутами в.

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

Динамическая таблица + подсчет двух ячеек
Всем привет! Возникла проблема с динамической таблицей. Имеется динамическая таблица(по нажатию.

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

оба кода совершенно бредовые (и где вы только такой ужас находите?) — зачем их ещё и объединять?
опишите лучше словами свою задачу

Регистрация: 20.10.2015
Сообщений: 101

Бредовые? Я эти коды нашёл на этом форуме, и представили их не новички, а опытные ребята. По отдельности они отлично работают. Простите за мои слова, но если вы не можете ил не знаете как это объединить, то зачам говорить что чей-то код — бредовый? Могли бы просто не отвечать

Добавлено через 21 минуту
Прошу прощения за грамматику

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

1. разумный и опытный человек не будет использовать конструкцию tbl.getElementsByTagName(‘tr’) , он использует tbl.rows — это про первый из ваших кодов

2. разумный и опытный человек не будет использовать два метода : createElement () и appendChild () для создания ячейки, он использует для этого один метод insertCell () — это ко второму вашему коду

но, как говорится, насильно мил не будешь
так что. успехов вам в «объединении»!
не забудьте только, что при арифметическом объединении объём бреда удвоится

Регистрация: 20.10.2015
Сообщений: 101

Я спорить не буду на счёт разумности той или иной функции и разумности пользователей данного форума, которые и предоставили эти коды, иначе бы не обращался за помощью.
Если у вас есть решение данной проблемы куда лучше данной проблемы — пожалуйста, предложите. Лично мне любой вариант интересен, т.к. я всё же больше силён в вёрстке страниц, нежели в их интерактивизации

Добавлено через 10 минут
Если у вас есть решение данной проблемы куда лучше — пожалуйста, предложите. *правка

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

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

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

Регистрация: 20.10.2015
Сообщений: 101

Я немного не то сюда отправил. Вместо input должны быть textarea. Логика такова, что после отправки данных на сервер будут созданы массивы(каждый столбец — это массив) с данными и текстовых полей. Данная функция уже есть РНР части, но для её реализации отсутствуют таблица, которая строится динамически.

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

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

ЦитатаСообщение от Noob Progaramm Посмотреть сообщение

Прошу прощения за не ясность моего первого сообщения

вы и сейчас не очень ясно изложили — что же вам нужно?
положим, имеется таблица из трёх столбцов (колонок), озаглавленных Фамилия, Имя, Отчество

в первой колонке, начиная со второй строки имеются текстовые поля с именами:
NAME= «surname [0]»
NAME=»surname [1]»
NAME=»surname [2]»

во второй колонке поля с именами:
NAME= «name [0]»
NAME=»name [1]»
NAME=»name [2]»
в третьем столбце поля с именами
NAME= «patronymic [0]»
NAME=»patronymic [1]»
NAME=»patronymic [2]»

когда добавляем строку, то в ней будет три ячейки с аналогичными именами:
NAME= «surname [ 3 ]» , NAME=»name [ 3 ]» , NAME=»patronymic [ 3 ]»
и с этим всё понятно

а вот какой заголовок в первой строке и какие имена полей (начиная со второй строки) должны появиться у первого добавляемого столбца?
у второго?
у третьего?

так что возвращаю вас к моему первому сообщению:

ЦитатаСообщение от kalabuni Посмотреть сообщение

опишите словами свою задачу
Регистрация: 20.10.2015
Сообщений: 101

Хорошо, словами так словами. Мне нужна таблица, у которой можно прибавить колонки(1,2,3..н) по нажатию одной кнопки и строчки по нажатию другой. Также во всех ячейках таблицы должны быть текстовые поля. Пытался своими ручками писать — не получилось. Потом нашёл данные коды и хотел на их примере слепить скрипт — тоже не получилось.
По сути, нужнo, грубо говоря, подобие Exel на JS

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

повторяю свой вопрос иными словами
откуда браузер узнает — какой заголовок нужно прописать у добавляемой колонки?
откуда браузер узнает — какие имена нужно прописывать полям ячеек в добавляемой колонке?

браузер — он не ясновидящий, ваши мысли угадывать не умеет

Добавлено через 23 минуты
———————
задумались?
предлагаю:
вариант 1 — при нажатии на кнопку «добавить колонку» всплывает окошко с двумя полями, куда вы вводите заголовок колонки и маску имени полей

вариант 2 — изначально имеете два массива, первый с заголовками добавляемых колонок, второй с маской имен полей (но здесь количество добавлений колонок получается ограниченным)

при обоих вариантах нажатие на кнопку «добавить строку» работает без всплывающего окошка, маску имен полей браузер берёт из последней существующей строки (добавить можно любое количество строк)

Регистрация: 20.10.2015
Сообщений: 101

А разве нельзя циклично присваивать имена? То есть есть скажем изначальное имя neme1, а имена всех остальных будут name[i]. При этом размер массива с именами будет увеличиваться на +1 каждый раз, как мы нажмём на Добавить колонку

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

как вы потом на сервере после отправки формы эту муть будете разбирать — я не представляю

ладно, сейчас напишу — это недолго

Регистрация: 20.10.2015
Сообщений: 101

Ну мне главное чтобы макет хоть какой-то перед глазами был, а с разбором на сервере уже потом разберусь

супермизантроп

Эксперт JS

3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625

Лучший ответ

Сообщение было отмечено Noob Progaramm как решение

Решение

сделал с «бонусом» (с удалением строк и колонок)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
style> a table input /style> a href="javascript : addROW ()">добавить строку в конец таблицы/a> a href="javascript : remROW ()" style="color:red">удалить нижнюю строку/a> hr align="left" noshade size="0" width="35%"> a href="javascript :addCOL ()">добавить столбец справа/a> a href="javascript :remCOL ()" style="color:red">удалить крайний правый столбец/a> table id="tbl" cellspacing="0" cellpadding="0" border> tr>td>input name="n0_0">/td>td>input name="n0_1">/td>td>input name="n0_2">/td>/tr> tr>td>input name="n1_0">/td>td>input name="n1_1">/td>td>input name="n1_2">/td>/tr> tr>td>input name="n2_0">/td>td>input name="n2_1">/td>td>input name="n2_2">/td>/tr> /table> script> function addROW () < var T = document.getElementById ('tbl'); var ro = T.insertRow (-1); for (var j = 0, J = T.rows [0].cells.length; j < J; j++) { var inp = document.createElement ('input'); inp.name = inp.value = 'n' + (T.rows.length - 1) +'_' + j; var ce = ro.insertCell (-1) ce.appendChild (inp); } } function remROW () { var T = document.getElementById ('tbl'; if (T.rows.length < 2) {alert ('В таблице должна остаться хотя бы одна строка. Команда отменена.'); return} T.deleteRow (T.rows.length - 1); } function addCOL () { var T = document.getElementById ('tbl'); for (var j = 0, J = T.rows.length; j < J; j++) { var inp = document.createElement ('input'); inp.name = inp.value = 'n' + j +'_' + T.rows [j].cells.length; var ce = T.rows [j].insertCell (-1) ce.appendChild (inp); } } function remCOL () { var T = document.getElementById ('tbl'); if (T.rows [0].cells.length < 2) {alert ('В таблице должен остаться хотя бы один столбец. Команда отменена.'); return} for (var j = 0, J = T.rows.length; j < J; j++) {var ceL = T.rows [j].cells.length; if (ceL > 1) T.rows [j].deleteCell (ceL - 1)> > /script>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *