Javascript объединение ячеек таблицы

Объединить соседние ячейки таблицы HTML с одинаковым значением, используя JS

Я боролся с этим некоторое время. У меня есть таблица, которая автоматически генерируется на основе некоторых данных JSON, которые могут отличаться. Я хотел бы объединить соседние ячейки в первом столбце, которые имеют одинаковое значение, например, «рыба» и «птица» в этой таблице:

 
 
fish
 
salmon
 
 
fish
 
cod
 
 
fish
 
plaice
 
 
bird
 
robin
 
 
bird
 
crow
 
 
 

Я не хочу использовать какие-либо библиотеки в идеале, просто чистый JS.

Вот как бы я хотел, чтобы это выглядело так:

 
 
fish
 
salmon
 
 
cod
 
 
plaice
 
 
bird
 
robin
 
 
crow
 
 

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

let table = document.querySelector('table'); let rowCount = 1; for (let i = 0; i < (table.rows.length - 1); i++) < if (table.rows[i].cells[0].innerHTML === table.rows[i + 1].cells[0].innerHTML) < rowCount++; >else if (rowCount !== 1) < table.rows[i].cells[0].setAttribute('rowspan', rowCount); for (let j = (i - rowCount + 1); j < rowCount; j++) < table.rows[j].cells[0].remove(); >; rowCount = 1; >; >;

 
 
fish
 
salmon
 
 
fish
 
cod
 
 
fish
 
plaice
 
 
bird
 
robin
 
 
bird
 
crow
 
 

Это не делает то, что я хочу, но я чувствую, что я действительно близок! Он пытается подсчитать количество ячеек (в первом столбце), для которых нижеприведенная ячейка имеет такое же значение, присваивая этот номер размеру строки последней соответствующей ячейки, а затем удаляя последующие ячейки, прежде чем вернуться к предыдущему циклу, чтобы перехватить остальные из них. Я бы хотел, чтобы мой окончательный код был вариацией этого, так что, может, кто-нибудь покажет мне, где я ошибаюсь, пожалуйста? Спасибо!

Источник

Создание и объединение ячеек в таблице

Объединение ячеек в таблице
Искал похожую тему — не нашел. Собственно вопрос: как объединить ячейки, которые были.

Объединение ячеек в таблице
Всем привет, помогите пожалуйста. Нужно условие для объединения ячеек в столбце таблице выводящей.

Объединение ячеек в таблице
Нужен совет по объединению ячеек в таблице, как лучше сделать. Есть пример. первые три строки с.

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

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

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

 html> head> meta charset="utf-8"> title>Ширина таблицыtitle> script> function tableCreate() { var body = document.body, tbl = document.createElement('table'); tbl.style.border = '1px solid black'; tbl.cellSpacing = 0; let jMode = (i, r, w, h) => { if (i == r) return w - 1; if (i > r && i  (r + h)) return w; return 0; }; for (var i = 0; i  15; i++) { var tr = tbl.insertRow(); for (var j = 0; j  20 - jMode(i, 5, 3, 3); j++) { if (i == 2 && j == 5) { } else { var td = tr.insertCell(); td.style.border = '1px solid black '; td.width = "50px"; td.height = "50px"; if (i == 5 && j == 7) { td.setAttribute('rowSpan', '3'); td.setAttribute('colSpan', '3'); } } } } body.appendChild(tbl); } script> head> body onload="tableCreate()"> body> html>

Здесь фукнция jMode принимает аргументы:
i — индекс строки
r — строка, с которой начинается «большая дырка»
w — количество столбцов в дырке(colspan)
h — количество строк в дырке (rowspan)

Из этого рассчитывается насколько надо уменьшить количество ячеек в текущей строке.

if (i == 1 && j == 10) { td.setAttribute('rowSpan', '3'); td.setAttribute('colSpan', '3'); }

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

Решение

Сообщение от Katerina1993

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

for (var j = 0; j  20 - jMode(i, 1, 3, 3); j++)

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

 html> head> meta charset="utf-8"> title>Ширина таблицыtitle> script> function tableCreate(hRow, hColumn) { var body = document.body, tbl = document.createElement('table'); tbl.style.border = '1px solid black'; tbl.cellSpacing = 0; let jMode = (i, r, w, h) => { if (i == r) return w - 1; if (i > r && i  (r + h)) return w; return 0; }; for (var i = 0; i  15; i++) { var tr = tbl.insertRow(); for (var j = 0; j  20 - jMode(i, hRow, 3, 3); j++) { if (i == 2 && j == 5) { } else { var td = tr.insertCell(); td.style.border = '1px solid black '; td.width = "50px"; td.height = "50px"; if (i == hRow && j == hColumn) { td.setAttribute('rowSpan', '3'); td.setAttribute('colSpan', '3'); } } } } body.appendChild(tbl); } script> head> body onload="tableCreate(7, 3)"> body> html>

А если например мне нужно сделать в нескольких местах объединение. Координаты и количество ячеек (которые нужно объединить) указаны в массиве. Как в этом случае быть? У меня например происходит дублирование ячеек.

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

 html> head> meta charset="utf-8"> title>Ширина таблицыtitle> script> function tableCreate() { var body = document.body, tbl = document.createElement('table'); var arr = [[1,1,4,4],[5,5,3,3]] tbl.style.border = '1px solid black'; tbl.cellSpacing = 0; let jMode = (i, r, w, h) => { if (i == r) return w - 1; if (i > r && i  (r + h)) return w; return 0; }; for (var i = 0; i  15; i++) { var tr = tbl.insertRow(); for (var j = 0; j  20; j++) { for(var ii = 0; ii  arr.length; ii++) { if(j  20-jMode(i, arr[ii][0], arr[ii][3], arr[ii][2])) { var td = tr.insertCell(); td.style.border = '1px solid black '; td.width = "50px"; td.height = "50px"; if (i == arr[ii][0] && j == arr[ii][1]) { td.setAttribute('rowSpan', arr[ii][2]); td.setAttribute('colSpan', arr[ii][3]); td.innerHTML = "\"img.jpg\">"; } } } } } body.appendChild(tbl); } script> head> body onload="tableCreate()"> body>

Сообщение от Katerina1993

А если например мне нужно сделать в нескольких местах объединение. Координаты и количество ячеек (которые нужно объединить) указаны в массиве. Как в этом случае быть? У меня например происходит дублирование ячеек.

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

Суть проблемы состояла в том, что если слева от новой дырки есть другая дырка, то положение этой самой новой дырки сдвигается на ширину той что слева(очень сложно внятно объяснить). То есть если дырка должна быть в пятой колонке, а слева есть другая дырка шириной в три колонки, то новую надо ставить не на пятой ячейке строки, а только на второй или третьей, в зависимости о того, находится ли дырка слева на этой же строке или выше.

Решил двумя способами. Первый состоит в том, что таблица сначала заполняется ячейками полностью. Потом устанавливаются дырки слева-направо, причем ячейка для новой дырки вычисляется по физическому положению. То есть, если надо поставить в пятый столбец, а ширина столбца — 50пх, плюс два пикселя на боковых границах, соответственно умножаем 52 на 5 и ищем ячейку в этом положении. После чего все ячейки вылезшие за расчетную ширину таблицы удаляются. Правда в этом случае были проблемы, когда страница грузилась в масштабированную вкладку. Там удалялись лишние столбцы почему-то. Второй способ построен на точном расчете (функция createTable) и должен работать правильно, но тоже не могу гарантировать, что будет так работать во всех случаях. Так что надо тестировать.

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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

 html> head> meta charset="utf-8"> title>Ширина таблицыtitle> script> function tableCreate(data) { data.sort((p1, p2) => p1[0] - p2[0]); var body = document.body, tbl = document.createElement('table'); tbl.style.border = '1px solid black'; tbl.cellSpacing = 0; for (var i = 0; i  15; i++) { var tr = tbl.insertRow(); for (var j = 0; j  20; j++) { var td = tr.insertCell(); td.style.border = '1px solid black '; td.width = "50px"; td.height = "50px"; td.title = `${i}:${j}`; } } body.appendChild(tbl); for (const pp of data) { let cell = Array.from(tbl.rows[pp[0]].cells).find(c => c.offsetLeft >= 52 * pp[1]); cell.setAttribute("colspan", pp[2]); cell.setAttribute("rowspan", pp[3]); let ccc = Array.from(tbl.querySelectorAll("td")).filter(c => c.offsetLeft > 20 * 52). forEach(c => c.parentElement.removeChild(c)); } } function createTable(data) { data = calcCells(data.map(i => i.map(j => j))); let tbl = document.createElement('table'); tbl.border = 1; tbl.cellSpacing = 0; let jMode = (i, r, w, h) => { if (i == r) return w - 1; if (i > r && i  (r + h)) return w; return 0; }; let jModes = i => { let result = 0; for (const p of data) { result += jMode(i, p[0], p[2], p[3]); } return result; }; for (var i = 0; i  15; i++) { var tr = tbl.insertRow(); for (var j = 0; j  20 - jModes(i); j++) { var td = tr.insertCell(); td.width = "50px"; td.height = "50px"; td.title = `${i}:${j}`; } } for (const pp of data) { let cell = tbl.rows[pp[0]].cells[pp[1]]; cell.setAttribute("colspan", pp[2]); cell.setAttribute("rowspan", pp[3]); } return tbl; } function calcCells(data) { data.sort((a1, a2) => a1[0] - a2[0]); for (let i = 0; i  data.length; i++) { for (let j = 0; j  i; j++) { if (data[i][1] > data[j][1]) { if (data[i][0] == data[j][0]) { data[i][1] -= (data[j][2] - 1); } if (data[i][0] > data[j][0] && data[i][0]  (data[j][0] + data[j][3])) { data[i][1] -= data[j][2]; } } } } return data; } window.onload = function (evt) { tableCreate([[1, 1, 4, 4], [5, 5, 3, 3], [7, 8, 5, 6], [6, 0, 3, 3]]); let data = [[1, 1, 4, 4], [5, 5, 3, 3], [7, 8, 5, 6], [6, 0, 3, 3]]; document.getElementById("container1").appendChild(createTable(data)); document.getElementById("container2").appendChild(createTable(data)); }; script> head> body> div id="container1">div> div id="container2">div> body> html>

В примере первые две таблицы сформированы методом createTable(с помощью расчета клеток), последняя — tableCreate (с помощью расчета физических позиций).

Источник

Русские Блоги

Объединение ячеек с одинаковым содержимым в таблице js

Тогда я написал простую форму на странице:

  data data data data data data data data data data data data 

Теперь я вызываю метод JS

Страница сообщает, что ошибка javascript ‘rows.length’ пуста или не является объектом, и длина таблицы не была получена

Передайте объект dom таблицы в

, MergeCellsVertical (test, 0); таким образом, вы не можете передать объект таблицы. Best table если вы используете name, вам нужно использовать document.getElementsByName («test») [0], чтобы получить его.

Интеллектуальная рекомендация

LiveVideostack Online Season 5 (13): высокопроизводительное видео

Вспышка видео бизнеса в сценарии 4G/5G и требования пользователя для более высокого качества (в прямом эфире, короткое видео, видео на -Деманд), более высокое качество изображения означает больше вычи.

Чем занимаются back-end программисты?

Внимание друзья! Редактор здесь, чтобы послать всем внимание и преимущества: Выполните поиск в общедоступной учетной записи WeChat «Quick Learning Java» и следуйте за вами, чтобы получить .

Сделай сам свой линейный стол с линейным хранилищем в C ++

Пожалуйста, укажите источник, спасибо ~ http: //blog.csdn.net/hongkangwl/article/details/21802073 Можно сказать, что линейная таблица является самой простой структурой данных, и ее описание:конечная п.

Вопросник письменного экзамена Huawei из 6 символов

Введите строку и найдите набор символов, содержащихся в строке Введите описание: Описание выхода: Пример ввода 1: Пример вывода 1: Личное решение таково: .

JUC -RENTRANTLOCK SUPPRONTION

Re etyrantlock, переводчик называется тяжелым замком, который является способом обеспечения безопасности потока. Это похоже на роль синхронизации, но каков его принцип реализации. После проверки многи.

Источник