合并具有相同值且位于同一行中的 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

假设你有这个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);

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

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

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

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

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

有关更多详细信息，请访问 https://www.computerhope.com/issues/ch001655.htm

谢谢！