Как объединить ячейки с одинаковыми значениями в html таблице с помощью js?

Question

kpot1979 @kpot1979

Как объединить ячейки с одинаковыми значениями в html таблице с помощью js?

Здравствуйте!
Есть таблица, вида

<table border="1" >
  <tr>
    <td>a</td>
    <td>aa</td>
    <td>text 1</td>
  </tr>
  <tr>
    <td>a</td>
    <td>aa</td>
    <td>text 2</td>
  </tr>
  <tr>
    <td>b</td>
    <td>aa</td>
    <td>text 3</td>
  </tr>
  <tr>
    <td>b</td>
    <td>bb</td>
    <td>text 4</td>
  </tr>
  <tr>
    <td>b</td>
    <td>bb</td>
    <td>text 5</td>
  </tr>
  <tr>
    <td>c</td>
    <td>bb</td>
    <td>text 6</td>
  </tr>
  <tr>
    <td>c</td>
    <td>cc</td>
    <td>text 7</td>
  </tr>
</table>

Как с помощью JS (JQUERY) сделать так, чтобы ячейки с одинаковыми значениями в соседних рядах автоматически объединялись, т.е. таблица имела вид:

<table border="1" >
  <tr>
    <td rowspan="2">a</td>
    <td rowspan="3">aa</td>
    <td>text 1</td>
  </tr>
  <tr>
    <td>text 2</td>
  </tr>
  <tr>
    <td rowspan="3">b</td>
    <td>text 3</td>
  </tr>
  <tr>
    <td rowspan="3">bb</td>
    <td>text 4</td>
  </tr>
  <tr>
    <td>text 5</td>
  </tr>
  <tr>
    <td rowspan="2">c</td>
    <td>text 6</td>
  </tr>
  <tr>
    <td>cc</td>
    <td>text 7</td>
  </tr>
</table>

Вопрос задан более трёх лет назад
2283 просмотра

3 комментария

Подписаться 2 Оценить 3 комментария

OVK2015 @OVK2015

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title></title>
		<style type="text/css">
			table
			{
				width: 90%;
				left: 5%;
				margin-bottom: 10px;
				position: relative;
			}
			td
			{
				text-align: center;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>a</td>
				<td>aa</td>
				<td>text 1</td>
			</tr>
			<tr>
				<td>a</td>
				<td>aa</td>
				<td>text 2</td>
			</tr>
			<tr>
				<td>b</td>
				<td>aa</td>
				<td>text 3</td>
			</tr>
			<tr>
				<td>b</td>
				<td>bb</td>
				<td>text 4</td>
			</tr>
			<tr>
				<td>b</td>
				<td>bb</td>
				<td>text 5</td>
			</tr>
			<tr>
				<td>c</td>
				<td>bb</td>
				<td>text 6</td>
			</tr>
			<tr>
				<td>c</td>
				<td>cc</td>
				<td>text 7</td>
			</tr>
		</table>
		<div id="answerPlace"></div>
	</body>
	<script type="text/javascript" src ="http://localhost/Script/js/jQuery/jquery-1.11.2.min.js">
	</script>
	<script type="text/javascript">
		function buildColumnArray(columnIndex)
		{
			var tempArray = new Array();
			var column = $('table tr').find('td:eq(' + columnIndex + ')');
			var cellText = '';
			var content = $(column[0]).text();
			var repeatAmount = 0;
			column.each(function(index, item)
			{
				if($(item).text() != content)
				{
					tempArray.push
					({
						'value' : content,
						'repeatAmount': repeatAmount,
						'cellText': cellText.substr(0, cellText.length - 1)
					});
					content = $(item).text();
					cellText = $(item).text() + ';';
					repeatAmount = 1;
				}
				else
				{
					repeatAmount++;
					cellText += $(item).next().text() + ';';
				}
			});
			tempArray.push
			({
				'value' : content,
				'repeatAmount': repeatAmount,
				'cellText': cellText.substr(0, cellText.length - 1)
			});
			return tempArray;
		}

		function buildSimpleTable()
		{
			resultTable = '<table border="1">';
			$('table tr').find('td:last').each(function(index, item)
			{
				resultTable += '<tr><td>' + $(item).text() + '</td></tr>';
			});
			resultTable += '</table>';
		}

		function appendRowSpan()
		{
			columnData.forEach(function(item)
			{
				var rowIndex = 0;
				item.forEach(function(item)
				{
					$(resultTable).find('tr:eq(' + rowIndex + ')').
						prepend('<td rowspan="' + item.repeatAmount + '">' + item.value + '</td>');
					rowIndex += item.repeatAmount;
				});
			});
		}

		var columnData = new Array();
		var columnAmount = $('table tr:eq(0) td').length - 1;
		var resultTable = '';

		$(document).ready(function()
		{
			while(columnAmount > 0)
			{
				columnData.push(buildColumnArray(columnAmount - 1));
				columnAmount--;
			}

			buildSimpleTable();

			resultTable = $(resultTable);
			appendRowSpan();

			$('#answerPlace').append(resultTable);
		});
	</script>
</html>

Написано более трёх лет назад

kpot1979 @kpot1979 Автор вопроса

OVK2015: Большое спасибо!

Написано более трёх лет назад
OVK2015 @OVK2015

kpot1979: Не за что,- самому интересно стало

Написано более трёх лет назад

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

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

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- 16 часов назад
- 140 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Можно ли тестировать javascript код по кнопке на клиенте?
- 1 подписчик
- 17 часов назад
- 74 просмотра
1

ответ
JavaScript

Простой
Как изменить набор ключей в массиве?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
JavaScript

Средний
Как стилизовать select в cs-cart?
- 1 подписчик
- 03 нояб.
- 41 просмотр
0

ответов
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 71 просмотр
2

ответа
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 320 просмотров
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 100 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Возможно ли убрать шапку в telegram mini app?
- 3 подписчика
- 02 нояб.
- 371 просмотр
1

ответ
JavaScript

Простой
Где попрактиковаться с табличными данными, как Pandas, в JS?
- 1 подписчик
- 02 нояб.
- 118 просмотров
1

ответ
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 57 просмотров
0

ответов
Показать ещё Загружается…

JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Поиск изображений на ElasticSearch

05 нояб. 2024, в 07:38

5000 руб./за проект

Разработать интерфейс (UX/UI) для финансового сервиса

05 нояб. 2024, в 02:29

100000 руб./за проект

Исправить критические ошибки архитектуры приложения на Flutter, чаты

05 нояб. 2024, в 01:36

250000 руб./за проект

kpot1979: Не за что,- самому интересно стало

Answer 1 · 2016-08-07 19:11:16

$(function() {
    $.map($("tr:first td"), function(b, a) {
        return $("tr td:nth-child(" + ++a + ")")
    }).forEach(function(b) {
        var a;
        b.each(function(b, c) {
            a && a.textContent == c.textContent ? ($(c).remove(), a.rowSpan++) : a = c
        })
    })
});

Answer 2 · 2016-08-07 18:21:04

Какая конкретно часть вызывает затруднения? Похоже, придётся пройтись по всем ячейкам с помощью each и составить массив с уникальными значениями. А потом на базе этого массива построить новую таблицу.

Как объединить ячейки с одинаковыми значениями в html таблице с помощью js?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт