合并具有相同值且位于同一行的 HTML 表格单元格答案

【问题标题】：Merge HTML table cells, that have the same value and are in the same row合并具有相同值且位于同一行的 HTML 表格单元格
【发布时间】：2020-08-21 10:24:28
【问题描述】：

我想合并单元格，它们在同一行中并且在其中具有相同的文本值。我在这里发现了许多类似的问题，但它们都与另一行的单元格合并。

这就是我的想象：

Before:
------------------------------------------------------------------------
|        A         |         A       |       A       |        B        |
------------------------------------------------------------------------
|        C         |         B       |       B       |        B        |
------------------------------------------------------------------------
|        C         |         C       |       D       |        E        |
------------------------------------------------------------------------

After:
------------------------------------------------------------------------
|                            A                       |        B        |
------------------------------------------------------------------------
|        C         |                         B                         |
------------------------------------------------------------------------
|                  C                 |       D       |        E        |
------------------------------------------------------------------------

提前谢谢你。

【问题讨论】：

您是动态创建表，还是静态创建表？是否有用于创建或影响表格布局的库？
我正在使用 Thymeleaf 创建它，并且表格从 Bootstrap 4 获取其布局。
最简单的方法是在创建表时执行此操作，但为此，我们需要创建代码。在客户端也可以，但实现起来可能有点困难。你必须决定你想要哪一个，并相应地编辑问题。
@MaddinM，如果您发现以下任何答案有帮助，请考虑投票或接受答案。

标签： javascript jquery html-table tablerow tablecell

【解决方案1】：

假设你有这个 HTML：

    <table id="table">
        <tr>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">C</td>
            <td colspan="1">D</td>
            <td colspan="1">E</td>
        </tr>
    </table>

你可以在 JS 中做类似的事情来合并单元格：

'use strict';

const deep = true;
const tableEl = document.getElementById('table').cloneNode(deep);
const nodesToRemove = [];

for (const childRow of tableEl.children) {
    let currNode = undefined;
    for (const td of childRow.children) {
        let lastNode = (currNode) ? currNode.cloneNode(deep) : undefined;
        currNode = td;
        if (lastNode && (lastNode.innerText === currNode.innerText)) {
            let colSpanVal = lastNode.getAttribute('colspan');
            currNode.setAttribute('colspan', Number(colSpanVal) + 1);
            lastNode = currNode.cloneNode(deep);
            nodesToRemove.push(currNode.previousElementSibling);
        }
    }
}

for (const node of nodesToRemove) {    
    node.remove();
}

document.getElementById('table').replaceWith(tableEl);

【讨论】：

【解决方案2】：

我认为colspan 是您要找的。p>

【讨论】：

【解决方案3】：

如果您在 HTML 表格中使用静态数据，则需要在 HTML 中使用 colspan 属性

 <table>
    <tr>
      <td colspan="3">A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td colspan="3">B</td>
    </tr>
    <tr>
      <td colspan="2">C</td>
      <td>D</td>
      <td>E</td>
    </tr>
  </table>

【讨论】：

谢谢，但我不使用静态数据，需要某种 JS 或 jQuery 脚本来检查行。
能否分享一下 JSON 数据样本，以便我做出相应的回答。
@MaddinM 该表在浏览器中将是静态的，但是您正在服务器上动态创建该表。此答案演示了您应该使用 Thymeleaf 创建的最终标记。

【解决方案4】：

您可以通过在 HTML 标记（表格数据）中使用 colspan 属性来合并列中的两个或多个表格单元格。要合并两个或多个行单元格，请使用 rowspan 属性。

如果要合并第一列的前两个单元格，可以在第一个标签中使用 colspan="2" 属性。该数字表示要为标签使用（合并）多少个单元格。

但是，如果要将第一列中的前两个单元格合并为一个单元格，则可以在第一个标记中使用 rowspan="2" 属性。数字表示标记要使用多少个单元格。

注意：您也可以使用“0”作为 colspan 和 rowspan 中的数字。所有现代浏览器都将 colspan 和 rowspan 中的“0”（零）视为最大行数或列数。例如，不计算表的行数，而是使用 rowspan="0" 将行扩展到表的末尾。使用“0”对于大表和行数和列数可能经常变化的动态表很有帮助。

更多详情，请访问https://www.computerhope.com/issues/ch001655.htm

谢谢！

【讨论】：