Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2024, 10:26
Интересующийся
Отправить личное сообщение для Anat37 Посмотреть профиль Найти все сообщения от Anat37
 
Регистрация: 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 успеха не принесла даже если я вместо массива использую таблицу.
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2024, 10:34
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Не совсем понятно
Сообщение от 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.
Приведите пример того, что должно получиться в результате в этом случае.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2024, 11:40
Интересующийся
Отправить личное сообщение для Anat37 Посмотреть профиль Найти все сообщения от Anat37
 
Регистрация: 12.01.2024
Сообщений: 14

Прикрепил приблизительный файл.

Но изначально количество строк и количество одинаковых fid не известно, т.к. все зависит от выбора пользователя.
Изображения:
Тип файла: jpg DSCF2191.JPG (1.66 Мб, 4 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2024, 12:08
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Причем тут рисунок?
Вы пишете, что у вас есть массив
{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:''}. Как их объединить? Что должно получиться в результате их объединения?
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2024, 12:44
Интересующийся
Отправить личное сообщение для Anat37 Посмотреть профиль Найти все сообщения от Anat37
 
Регистрация: 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'
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2024, 12:51
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,744

Может что-то типа этого нужно (как еще можно "объединить" такие данные я не представляю)?
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"}]}
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2024, 12:56
Интересующийся
Отправить личное сообщение для Anat37 Посмотреть профиль Найти все сообщения от Anat37
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2024, 13:16
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,744

Так?
<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. Причина: Добавил стили
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2024, 13:19
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Вопросы.
У вас в примере есть строки с fid:''. На рисунке строки с пустым fid не объединены. Что на самом деле надо делать с такими строками?

Могут ли строки с одинаковым fid идти не подряд?
({id:'2',name:'2',fid:'1'} ,{id:'3',name:'3',fid:''},{id:'4',name:'4',fid:'1' })
Что делать в этом случае? Строки с одинаковым fid переставлять так, что бы они шли подряд?

Что является входом? Некоторый массив или есть исходная таблица, которую надо реорганизовать?
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2024, 13:29
Интересующийся
Отправить личное сообщение для Anat37 Посмотреть профиль Найти все сообщения от Anat37
 
Регистрация: 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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сумма значений в строке таблицы LaVASHik Библиотеки/Тулкиты/Фреймворки 2 04.02.2018 23:24
объединение четырёх таблиц DivMan Серверные языки и технологии 1 31.12.2017 20:27
Как запретить добавление одинаковых значений в массив ? vanyabb Angular.js 2 03.04.2017 12:41
Средне арифметическое в двух столбцах таблицы deespe11 Элементы интерфейса 9 09.02.2013 17:40
поиск одинаковых значений элементов массива Valstor Общие вопросы Javascript 20 09.12.2011 18:56