合并 HTML table 个具有相同值且位于同一行的单元格

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 table

中使用静态数据，则需要在 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:

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

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

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

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

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

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

谢谢！

合并 HTML table 个具有相同值且位于同一行的单元格

Merge HTML table cells, that have the same value and are in the same row

javascript

jquery

html-table

tablecell

tablerow