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

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

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Как встроить песочницу кода на сайт?
- 1 подписчик
- час назад
- 10 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Какой компонент готовый для мультиселекта с опциями?
- 1 подписчик
- час назад
- 10 просмотров
0

ответов
JavaScript

Простой
Простой скрипт увеличения радиуса, не хочет?
- 1 подписчик
- 4 часа назад
- 27 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Можно ли каким-то образом экспортировать pydantic модель в JavaScript class?
- 1 подписчик
- 9 часов назад
- 39 просмотров
0

ответов
JavaScript

Простой
Какие есть методы дебага JavaScript кода?
- 3 подписчика
- 11 часов назад
- 643 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как переместить прокрутку таблицы к нижней части видимой области?
- 1 подписчик
- 18 часов назад
- 40 просмотров
0

ответов
JavaScript

Простой
Из-за чего инкрементация в for и while срабатывает по разному?
- 1 подписчик
- 18 часов назад
- 107 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как динамически увеличить родительский блок в зависимости от градуса поворота дочернего?
- 1 подписчик
- 23 часа назад
- 47 просмотров
1

ответ
JavaScript

Простой
Как в map вернуть развернутый массив?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
JavaScript

Простой
Как написать функцию, которая принимает цифру и возвращает число прописью?
- 2 подписчика
- вчера
- 261 просмотр
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

HFT программист C#/C++

12 мая 2024, в 00:31

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

Разработать приложение WPF на С# для работы с базой данных

11 мая 2024, в 23:57

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

Доработка/Разработка OpenCart интернет-магазина

11 мая 2024, в 23:03

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

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?

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

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

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