CODEWITHSUNDEEP
javascriptjqueryhtml-tabletablerowtablecell
Maddin
Maddin

Reputation: 194

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

I would like to merge cells, that are in the same row and have the same text value inside them. There are many similar questions i found here, but all of them merge with a cell in another row.

This is how i would imagine it:

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

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

Thank you in advance!

Upvotes: 0

Views: 12465

Answers (4)

derekbaker783
derekbaker783

Reputation: 9591

Assuming you had this 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>

You could do something similar to this in JS to merge the cells:

'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);

Upvotes: 2

Patrick Cyubahiro
Patrick Cyubahiro

Reputation: 109

You can merge two or more table cells in a column by using the colspan attribute in a HTML tag (table data). To merge two or more row cells, use the rowspan attribute.

If you want to combine the first two cells in the first column, you can use the colspan="2" attribute in the first tag. The number represents how many cells to use (merge) for the tag.

However, If you want to combine the first two cells in the first column into one cell, you can use the rowspan="2" attribute in the first tag. The number represents how many cells to use for the tag.

N.B: You can also use "0" as the number in colspan and rowspan. All modern browsers treat a "0" (zero) in the colspan and rowspan as the maximum rows or columns. For example, instead of counting a table's rows, use rowspan="0" to expand the row to the end of the table. Using "0" is helpful for big tables and for dynamic tables where the number of rows and columns may change frequently.

For further details, visit https://www.computerhope.com/issues/ch001655.htm

Thank you!

Upvotes: 0

Aman
Aman

Reputation: 868

You need to use colspan attribute in HTML, if you are using static data in your HTML table 

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

Upvotes: 4

DirkBroenink
DirkBroenink

Reputation: 55

I think colspan is what you're looking for.

Upvotes: 1

Related Questions