合并具有相同值并且在同一行中的HTML表格单元格

Question

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

这就是我的想象：

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

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

先谢谢您。

Answer 1

我认为您正在寻找colspan。

Answer 2

[如果在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>

Answer 3

假设您具有此标记：

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

您可以执行类似的操作：

'use strict';

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

for (const childRow of tableEl.children) {
    const currNode = undefined;
    for (const td of childRow.children) {
        let lastNode = (currNode) ? currNode.cloneNode(deep) : undefined;
        currNode = td;
        if (lastNode && (lastNode.innerText === currNode.innerText)) {
            var 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);