Объединение одинаковых значений в столбцах таблицы
Здравствуйте, форумчане!
Есть массив вида {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 успеха не принесла даже если я вместо массива использую таблицу. |
Не совсем понятно
Цитата:
|
Вложений: 1
Прикрепил приблизительный файл.
Но изначально количество строк и количество одинаковых 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.) Вот есть {id:'1',name:'1',fid:''} и {id:'3',name:'3',fid:''}. Как их объединить? Что должно получиться в результате их объединения? |
Извините, что плохо объясняю, думал картинка будет понятней.
Может так будет понятней: ячейки в столбце 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' |
Может что-то типа этого нужно (как еще можно "объединить" такие данные я не представляю)?
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"}]} |
Может быть так будет понятней?
Мне бы таблицу получить из массива с объединением строк. <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> |
Так?
<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> |
Вопросы.
У вас в примере есть строки с fid:''. На рисунке строки с пустым fid не объединены. Что на самом деле надо делать с такими строками? Могут ли строки с одинаковым fid идти не подряд? ({id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' }) Что делать в этом случае? Строки с одинаковым fid переставлять так, что бы они шли подряд? Что является входом? Некоторый массив или есть исходная таблица, которую надо реорганизовать? |
Цитата:
Да, строки с одинаковыми fid могут идти не друг за другом и их необходимо будет переставить. Есть только массив, в котором количество строк изначально неизвестно и количество одинаковых fid также неизвестно, может быть 0, а может быть и 10. |
Часовой пояс GMT +3, время: 01:21. |