Перебор строки таблицы и объединение
Доброго времени суток!
Подскажите пожалуйста как перебрать таблицу и "объединить" ячейки в строке с одинаковым контентом при помощи 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;
}
}
}
}
Заранее благодарен! |
PILATONE,
пример минимальный таблица до и после? |
Вложений: 2
рони,
Например такая табличка с подключенным скриптом и без: мне же надо чтоб объединялись ячейки не в столбцах, а в строках. вложения с картинками ниже. <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> |
объединение ячеек таблицы с одинаковым содержанием
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>
|
рони,
Спасибо огромное! еще вопросик, а как сделать чтоб пустые ячейки не объединялись? |
Цитата:
<!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>
|
рони,
Большое спасибо! без вас я бы не справился! |
| Часовой пояс GMT +3, время: 12:40. |