Форум

PILATONE · #1 (**permalink**) 14.06.2016, 21:42

Доброго времени суток!

Подскажите пожалуйста как перебрать таблицу и "объединить" ячейки в строке с одинаковым контентом при помощи JavaScript.

Есть скрипт который объединяет ячейки в столбиках, но так как я пока не очень дружу с JS переписать его не могу

Вот кстати он:

var x = document.getElementById("table").rows;
		var i, j, z;
		var a = 0;

		for (i = x[0].cells.length - 1; i > 0; i--) {
			for (j = 2; j < x.length; j++) {

				if (x[j].cells[i].textContent == x[j - 1].cells[i].textContent) {
					if (x[j].cells[i].textContent != "") {
						a++;

						if (j == (x.length - 1)) {
							for (z = 0; z < a; z++) {
								x[j - z].deleteCell(i);
							}
							x[j - a].cells[i].setAttribute("rowSpan", (a + 1));
							a = 0;
						}
					}
				} else {

					if (a >= 1) {
						for (z = 1; z < (a + 1); z++) {
							x[j - z].deleteCell(i);
						}
						x[j - (a + 1)].cells[i].setAttribute("rowSpan", (a + 1));
						a = 0;
					}
				}
			}
		}

Заранее благодарен!

рони · #2 (**permalink**) 14.06.2016, 21:48

PILATONE,
пример минимальный таблица до и после?

PILATONE · #3 (**permalink**) 14.06.2016, 22:05

рони,
Например такая табличка с подключенным скриптом и без:

мне же надо чтоб объединялись ячейки не в столбцах, а в строках.

вложения с картинками ниже.

<table id="table">
	<tr>
		<td></td>
		<td>один</td>
		<td>два</td>
		<td>три</td>
		<td>четыре</td>
		<td>пять</td>
	</tr>
	<tr>
		<td>два</td>
		<td>3</td>
		<td>3</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
	<tr>
		<td>три</td>
		<td>3</td>
		<td>8</td>
		<td>5</td>
		<td>9</td>
		<td>9</td>
	</tr>
	<tr>
		<td>четыре</td>
		<td>2</td>
		<td>8</td>
		<td>5</td>
		<td>9</td>
		<td>5</td>
	</tr>
	<tr>
		<td>пять</td>
		<td>2</td>
		<td>5</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
</table>

рони · #4 (**permalink**) 14.06.2016, 22:28

PILATONE,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
    border: 1px solid #008000;
    text-align: center;
  }

 </style>

  <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>
</head>

<body>
<table id="table">
	<tr>
		<td></td>
		<td>один</td>
		<td>два</td>
		<td>три</td>
		<td>четыре</td>
		<td>пять</td>
	</tr>
	<tr>
		<td>два</td>
		<td>3</td>
		<td>3</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
	<tr>
		<td>три</td>
		<td>3</td>
		<td>8</td>
		<td>5</td>
		<td>9</td>
		<td>9</td>
	</tr>
	<tr>
		<td>четыре</td>
		<td>2</td>
		<td>8</td>
		<td>5</td>
		<td>9</td>
		<td>5</td>
	</tr>
	<tr>
		<td>пять</td>
		<td>2</td>
		<td>5</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
</table>

</body>
</html>

PILATONE · #5 (**permalink**) 14.06.2016, 22:34

рони,
Спасибо огромное!

еще вопросик, а как сделать чтоб пустые ячейки не объединялись?

рони · #6 (**permalink**) 14.06.2016, 22:45

Сообщение от PILATONE

а как сделать чтоб пустые ячейки не объединялись?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
    border: 1px solid #008000;
    text-align: center;
  }

 </style>

  <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 (/\S/.test(b.textContent) && b.textContent == a.textContent) {
            a.colSpan++;
            c.removeChild(b);
            return a
            }
            return b;
        })
    })
});
  </script>
</head>

<body>
<table id="table">
	<tr>
		<td></td>
		<td>один</td>
		<td>два</td>
		<td>три</td>
		<td>четыре</td>
		<td>пять</td>
	</tr>
	<tr>
		<td>два</td>
		<td>3</td>
		<td>3</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
	<tr>
		<td>три</td>
		<td>3</td>
		<td> </td>
		<td> </td>
		<td>9</td>
		<td>9</td>
	</tr>
	<tr>
		<td>четыре</td>
		<td>2</td>
		<td>8</td>
		<td>5</td>
		<td>9</td>
		<td>5</td>
	</tr>
	<tr>
		<td>пять</td>
		<td>2</td>
		<td>5</td>
		<td>5</td>
		<td>4</td>
		<td>4</td>
	</tr>
</table>

</body>
</html>

PILATONE · #7 (**permalink**) 14.06.2016, 22:51

рони,
Большое спасибо!
без вас я бы не справился!

Форум

Справочник

Discord чат

Курсы javascript