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

Learn merge html table cells, that have the same value and are in the same row with practical examples, diagrams, and best practices. Covers javascript, jquery, html-table development techniques wi...

Merging HTML Table Cells with Identical Values in the Same Row

Learn how to dynamically merge adjacent HTML table cells that share the same value within a single row using JavaScript and jQuery for cleaner, more readable tables.

HTML tables are a fundamental way to display tabular data on the web. However, tables can often become visually cluttered when adjacent cells in the same row contain identical data. This article explores a practical solution using JavaScript and jQuery to automatically merge these redundant cells, enhancing readability and improving the user experience. We'll cover the logic, provide code examples, and discuss best practices for implementing this feature.

Understanding the Problem: Redundant Cells

Consider a table displaying event schedules where multiple consecutive time slots in a single day are allocated to the same activity. Without merging, each of these identical cells would be rendered separately, creating visual noise. Merging them into a single, larger cell (using the rowspan or colspan attribute) makes the table much easier to digest. Our goal is to automate this process for horizontal merging within a row.

A diagram illustrating an HTML table before and after cell merging. The 'before' table shows three adjacent cells in a row, all labeled 'Meeting'. The 'after' table shows these three cells merged into a single cell spanning three columns, still labeled 'Meeting'. Arrows indicate the transformation. Use a simple, clean table style with clear labels.

Before and After: Merging Redundant Cells

Core Logic for Horizontal Merging

The process involves iterating through each row of the table and, for each row, comparing adjacent cells. If two consecutive cells have the same text content, the first cell's colspan attribute is incremented, and the second (redundant) cell is hidden or removed. This continues until a cell with different content is encountered or the end of the row is reached. We must be careful to handle the index correctly as cells are removed or hidden.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Banana</td>
      <td>Banana</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Grape</td>
      <td>Grape</td>
      <td>Kiwi</td>
    </tr>
    <tr>
      <td>Peach</td>
      <td>Mango</td>
      <td>Mango</td>
      <td>Mango</td>
    </tr>
  </tbody>
</table>

A basic HTML table that will be processed for merging.

Implementing the Merging Logic with jQuery

jQuery simplifies DOM manipulation, making it an excellent choice for this task. We'll select all table rows, then iterate through their cells. For each cell, we compare its text content with the next cell's content. If they match, we increment the current cell's colspan and hide the next cell. The key is to manage the loop index carefully to account for hidden cells.

$(document).ready(function() {
  $('table tr').each(function() {
    let cells = $(this).find('td');
    let i = 0;
    while (i < cells.length) {
      let currentCell = $(cells[i]);
      let j = i + 1;
      while (j < cells.length) {
        let nextCell = $(cells[j]);
        if (currentCell.text() === nextCell.text()) {
          let colspan = parseInt(currentCell.attr('colspan') || 1, 10);
          currentCell.attr('colspan', colspan + 1);
          nextCell.hide();
          j++;
        } else {
          break;
        }
      }
      i = j;
    }
  });
});

jQuery script to merge horizontally adjacent cells with identical values.

⚠️

This script modifies the DOM directly. If your table has complex structures or relies on specific CSS selectors, ensure that hiding cells (nextCell.hide()) doesn't break your layout. Alternatively, you could use nextCell.remove() but be aware that removing elements permanently alters the DOM structure.

Enhancements and Considerations

While the basic script works, several enhancements can be made. Consider adding an option to specify which columns should be considered for merging, or to handle cases where cells might contain HTML instead of just plain text. Performance can also be a factor for very large tables, where direct DOM manipulation might be slow. In such cases, consider virtual DOM libraries or optimizing the loop. Also, remember accessibility: merged cells should still convey their meaning clearly to screen readers.

💡

For tables with dynamic content loaded via AJAX, ensure that the merging function is called after the table content has been fully loaded and rendered. You might need to wrap the merging logic in a function and call it on success of your AJAX request.

1. Step 1

Include jQuery in your HTML document, either via a CDN or a local file.

2. Step 2

Add the provided JavaScript/jQuery code within a <script> tag in your HTML file, preferably at the end of the <body> or within $(document).ready() to ensure the DOM is fully loaded.

3. Step 3

Ensure your HTML table has a standard <table>, <thead>, <tbody>, <tr>, and <td> structure.

4. Step 4

Test the page in a browser to observe the merged cells. Inspect the elements to verify the colspan attributes and hidden cells.