我已经为此苦苦挣扎了一段时间。我有一个根据一些 JSON 数据自动生成的表，该数据可能会有所不同。我想合并第一列中具有相同值的相邻单元格，例如此表中的“鱼”和“鸟”：
<table>
<tr>
<td>fish</td>
<td>salmon</td>
</tr>
<tr>
<td>fish</td>
<td>cod</td>
</tr>
<tr>
<td>fish</td>
<td>plaice</td>
</tr>
<tr>
<td>bird</td>
<td>robin</td>
</tr>
<tr>
<td>bird</td>
<td>crow</td>
</tr>
</table>
理想情况下我不想使用任何库，只想使用纯 JS。
这就是我希望它看起来像的样子：
table, tr, td {
border: solid 1px black;
}
<table>
<tr>
<td rowspan="3">fish</td>
<td>salmon</td>
</tr>
<tr>
<td>cod</td>
</tr>
<tr>
<td>plaice</td>
</tr>
<tr>
<td rowspan="2">bird</td>
<td>robin</td>
</tr>
<tr>
<td>crow</td>
</tr>
</table>
我一直在寻找不同的方法来识别不同的值及其频率，然后将行跨度更改为正确的数字，然后删除其他单元格，但这些都在不同的用例中崩溃了。
这是我到目前为止所拥有的：
let table = document.querySelector('table');
let rowCount = 1;
for (let i = 0; i < (table.rows.length - 1); i++) {
if (table.rows[i].cells[0].innerHTML === table.rows[i + 1].cells[0].innerHTML) {
rowCount++;
} else if (rowCount !== 1) {
table.rows[i].cells[0].setAttribute('rowspan', rowCount);
for (let j = (i - rowCount + 1); j < rowCount; j++) {
table.rows[j].cells[0].remove();
};
rowCount = 1;
};
};
table, tr, td {
border: solid 1px black;
}
<table>
<tr>
<td>fish</td>
<td>salmon</td>
</tr>
<tr>
<td>fish</td>
<td>cod</td>
</tr>
<tr>
<td>fish</td>
<td>plaice</td>
</tr>
<tr>
<td>bird</td>
<td>robin</td>
</tr>
<tr>
<td>bird</td>
<td>crow</td>
</tr>
</table>
这根本不是我想要的，但我觉得我已经很接近了！它尝试计算下面的单元格具有相同值的（第一列）单元格的数量，将该数字分配给最后一个相关单元格的行跨度，然后删除后续单元格，然后再循环返回以捕获其余单元格。我希望我的最终代码是这个的变体，所以有人可以告诉我哪里出错了吗？
你们确实很接近！
一种简化的方法是保留对当前“标题”单元格的引用，即您想要增加的单元格rowspan的。这样你就根本不需要处理索引，从而产生一个非常简单的算法：
在 JavaScript 中，它看起来像这样：
const table = document.querySelector('table');
let headerCell = null;
for (let row of table.rows) {
const firstCell = row.cells[0];
if (headerCell === null || firstCell.innerText !== headerCell.innerText) {
headerCell = firstCell;
} else {
headerCell.rowSpan++;
firstCell.remove();
}
}
table, tr, td {
border: solid 1px black;
}
<table>
<tr>
<td>fish</td>
<td>salmon</td>
</tr>
<tr>
<td>fish</td>
<td>cod</td>
</tr>
<tr>
<td>fish</td>
<td>plaice</td>
</tr>
<tr>
<td>bird</td>
<td>robin</td>
</tr>
<tr>
<td>bird</td>
<td>crow</td>
</tr>
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
