Как объединить ячейки с одинаковыми значениями в 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

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 минуты назад
- 36 просмотров
0

ответов
JavaScript

Средний
Postman. Как увеличить время жизни токена?
- 1 подписчик
- 46 минут назад
- 37 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 9 часов назад
- 65 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 19 часов назад
- 97 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 88 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1461 просмотр
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 58 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 99 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Разработать 3D модель лопасти

23 дек. 2024, в 10:43

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

Разработать принципиальную схему в Altium Designer

23 дек. 2024, в 10:32

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

Разработать бота для отслеживания неудачных тон транзакций

23 дек. 2024, в 09:55

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

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?

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

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

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