Объединить 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

Вы можете объединить две или более ячеек таблицы в столбце, используя атрибут colspan в теге HTML (данные таблицы). Чтобы объединить две или более ячеек строки, используйте атрибут rowspan.

Если вы хотите объединить первые две ячейки в первом столбце, вы можете использовать атрибут colspan = "2" в первом теге. Число представляет, сколько ячеек использовать (объединить) для тега.

Однако, если вы хотите объединить первые две ячейки в первом столбце в одну ячейку, вы можете использовать атрибут rowspan = "2" в первом теге. Число представляет, сколько ячеек использовать для тега.

NB: Вы также можете использовать «0» в качестве числа в colspan и rowspan. Все современные браузеры рассматривают «0» (ноль) в colspan и rowspan как максимальное количество строк или столбцов. Например, вместо подсчета строк таблицы используйте rowspan = "0", чтобы развернуть строку до конца таблицы. Использование «0» полезно для больших таблиц и для динамических c таблиц, в которых количество строк и столбцов может часто меняться.

Для получения дополнительной информации посетите https://www.computerhope.com/issues/ch001655.htm

Спасибо!

Answer 3

Вам необходимо использовать атрибут colspan в HTML, если вы используете данные stati c в своей HTML таблице

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

Думаю, colspan - это то, что вы ищете.