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

wooyq4lh  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(160)

我想合并单元格,这是在同一行,并有相同的文本值内。我在这里发现了许多类似的问题,但它们都与另一行的一个单元格合并。
我会这样想象:

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

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

字符串
在此先谢谢您!

lmyy7pcs

lmyy7pcs1#

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

ds97pgxw

ds97pgxw2#

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

字符串

llycmphe

llycmphe3#

我想colspan就是你要找的。

rkue9o1l

rkue9o1l4#

通过使用HTML标记(表数据)中的colspan属性,可以合并列中的两个或多个表单元格。若要合并两个或多个行单元格,请使用rowspan属性。
如果要合并第一列中的前两个单元格,可以在第一个标记中使用colspan=“2”属性。该数字表示要为标记使用(合并)的单元格数量。
但是,如果要将第一列中的前两个单元格合并为一个单元格,则可以在第一个标记中使用rowspan=“2”属性。该数字表示要用于标记的单元格数量。
B:您也可以使用“0”作为colspan和rowspan中的数字。所有现代浏览器都将colspan和rowspan中的“0”(零)视为最大行或列。例如,使用rowspan=“0”将行扩展到表的末尾,而不是计算表的行数。使用“0”对于大型表和动态表很有帮助,因为动态表的行数和列数可能会频繁更改。
更多详情,请访问https://www.computerhope.com/issues/ch001655.htm
谢谢你,谢谢

相关问题