12.01.2024, 10:26
|
Интересующийся
|
|
Регистрация: 12.01.2024
Сообщений: 14
|
|
Объединение одинаковых значений в столбцах таблицы
Здравствуйте, форумчане!
Есть массив вида {id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}, и т.д..
Мне необходимо объединить ячейки в столбцах с одинаковыми fid.
Нашел https://javascript.ru/forum/dom-wind...bedinenie.html, но здесь объединение строк.
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelectorAll("tr");
[].forEach.call(a, function(c) {
var a = c.querySelectorAll("td");
[].reduce.call(a, function(a, b) {
if (b.textContent != a.textContent) return b;
a.colSpan++;
c.removeChild(b);
return a
})
})
});
</script>
Поскольку я очень плохо разбираюсь в JS, простая замена в этом коде colSpan на rowSpan успеха не принесла даже если я вместо массива использую таблицу.
|
|
12.01.2024, 10:34
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Не совсем понятно
Сообщение от Anat37
|
Есть массив вида {id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}, и т.д..
Мне необходимо объединить ячейки в столбцах с одинаковыми fid.
|
Приведите пример того, что должно получиться в результате в этом случае.
|
|
12.01.2024, 11:40
|
Интересующийся
|
|
Регистрация: 12.01.2024
Сообщений: 14
|
|
Прикрепил приблизительный файл.
Но изначально количество строк и количество одинаковых fid не известно, т.к. все зависит от выбора пользователя.
|
|
12.01.2024, 12:08
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Причем тут рисунок?
Вы пишете, что у вас есть массив
{id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}, и т.д..
Его надо во что то преобразовать. Что то с чем то объединить (с одинаковыми fid.)
Вот есть {id:'1',name:'1',fid:''} и {id:'3',name:'3',fid:''}. Как их объединить? Что должно получиться в результате их объединения?
|
|
12.01.2024, 12:44
|
Интересующийся
|
|
Регистрация: 12.01.2024
Сообщений: 14
|
|
Извините, что плохо объясняю, думал картинка будет понятней.
Может так будет понятней:
ячейки в столбце fid с одинаковыми значениями объединить, если fid:'', их не объединять
т.е. объединить ячейки из массива
{id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}, и т.д..
где fid:'1' и fid:'3'
|
|
12.01.2024, 12:51
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,793
|
|
Может что-то типа этого нужно (как еще можно "объединить" такие данные я не представляю)?
function groupBy(iterable, key) {
const result = {};
for (let item of iterable) {
const itemKey = item[key] ?? '';
result[itemKey] ??= [];
result[itemKey].push(item);
}
return result;
}
var data = [{id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}];
console.log(groupBy(data, 'fid'));//{"1":[{"id":"2","name":"2","fid":"1"},{"id":"4","name":"4","fid":"1"}],"3":[{"id":"5","name":"5","fid":"3"}],"":[{"id":"1","name":"1","fid":""},{"id":"3","name":"3","fid":""}]," 3":[{"id":"6","name":"6","fid":" 3"}]}
|
|
12.01.2024, 12:56
|
Интересующийся
|
|
Регистрация: 12.01.2024
Сообщений: 14
|
|
Может быть так будет понятней?
Мне бы таблицу получить из массива с объединением строк.
<table>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
Последний раз редактировалось Anat37, 12.01.2024 в 13:00.
|
|
12.01.2024, 13:16
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,793
|
|
Так?
<div id="table-container"></div>
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
</style>
<script>
function groupBy(iterable, key) {
const result = {};
for (let item of iterable) {
const itemKey = item[key] ?? '';
result[itemKey] ??= [];
result[itemKey].push(item);
}
return result;
}
function makeTableNode(groupedData, groupedByKey) {
const values = Object.values(groupedData);
const firstItem = values?.at(0)?.at(0);
const table = document.createElement('table');
if (!firstItem) {
return table;
}
// thead
const thead = document.createElement('thead');
table.appendChild(thead);
const tr = document.createElement('tr');
thead.appendChild(tr);
for (let key in firstItem) {
const th = document.createElement('th');
th.textContent = key;
tr.appendChild(th);
}
// tbody
const tbody = document.createElement('tbody');
table.appendChild(tbody);
values?.forEach(list => {
list.forEach((item, index)=> {
const tr = document.createElement('tr');
tbody.appendChild(tr);
for(let key in item) {
const isGroupByKey = key === groupedByKey;
if (index && isGroupByKey) {
continue;
}
const td = document.createElement('td');
tr.appendChild(td);
td.textContent = item[key];
if (isGroupByKey && list.length) {
td.rowSpan = list.length;
}
}
});
});
return table;
}
var data = [{id:'1',name:'1',fid:''},{id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' },{id:'5',name:'5',fid:'3'},{id:'6',name:'6',fid:' 3'}];
(data => {
const container = document.querySelector('#table-container');
if (!container) {
return;
}
container.innerHTML = '';
container.appendChild(
makeTableNode(
groupBy(data, 'fid'),
'fid'
)
);
})(data);
</script>
Последний раз редактировалось Nexus, 12.01.2024 в 13:20.
Причина: Добавил стили
|
|
12.01.2024, 13:19
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
Вопросы.
У вас в примере есть строки с fid:''. На рисунке строки с пустым fid не объединены. Что на самом деле надо делать с такими строками?
Могут ли строки с одинаковым fid идти не подряд?
({id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' })
Что делать в этом случае? Строки с одинаковым fid переставлять так, что бы они шли подряд?
Что является входом? Некоторый массив или есть исходная таблица, которую надо реорганизовать?
|
|
12.01.2024, 13:29
|
Интересующийся
|
|
Регистрация: 12.01.2024
Сообщений: 14
|
|
Сообщение от voraa
|
Вопросы.
У вас в примере есть строки с fid:''. На рисунке строки с пустым fid не объединены. Что на самом деле надо делать с такими строками?
Могут ли строки с одинаковым fid идти не подряд?
({id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' })
Что делать в этом случае? Строки с одинаковым fid переставлять так, что бы они шли подряд?
Что является входом? Некоторый массив или есть исходная таблица, которую надо реорганизовать?
|
Да, пустые fid не объединяются.
Да, строки с одинаковыми fid могут идти не друг за другом и их необходимо будет переставить.
Есть только массив, в котором количество строк изначально неизвестно и количество одинаковых fid также неизвестно, может быть 0, а может быть и 10.
|
|
|
|