如何基于<td>类合并表格行？（JavaScript）

To fix your issue where rows are merged only by value (ignoring the row class), you need to modify your JavaScript to compare both the cell value and the row's class attribute when deciding whether to merge rows. Here's a complete, tested implementation tailored to your table structure:

Step-by-Step Code Implementation #

function mergeRowsByValueAndClass() {
  const tbody = document.getElementById('property_dtl_table_body');
  if (!tbody) return; // Exit if table body doesn't exist

  let prevRow = null;
  let targetCellIndex = 0; // Adjust this to the column you want to merge (0 = first column)
  let currentRowspan = 1;

  // Iterate over each row in the table body
  tbody.querySelectorAll('tr').forEach(currentRow => {
    const currentCell = currentRow.cells[targetCellIndex];
    const currentRowClass = currentRow.className.trim();

    // Skip rows that might be hidden (optional, adjust as needed)
    if (currentRow.style.display === 'none') return;

    if (prevRow) {
      const prevCell = prevRow.cells[targetCellIndex];
      const prevRowClass = prevRow.className.trim();

      // Check BOTH: cell values match AND row classes are identical
      const valuesMatch = currentCell.textContent.trim() === prevCell.textContent.trim();
      const classesMatch = currentRowClass === prevRowClass;

      if (valuesMatch && classesMatch) {
        // Merge rows: increment rowspan and hide current cell
        currentRowspan++;
        prevCell.rowSpan = currentRowspan;
        currentCell.style.display = 'none';
      } else {
        // Reset for new group of rows
        currentRowspan = 1;
        prevRow = currentRow;
      }
    } else {
      // Initialize with first row
      prevRow = currentRow;
    }
  });
}

// Run the function after the table is fully rendered
// If you're using Rails, you might want to call this after Turbolinks loads too
document.addEventListener('DOMContentLoaded', mergeRowsByValueAndClass);
// For Turbolinks (Rails 5+):
// document.addEventListener('turbolinks:load', mergeRowsByValueAndClass);

Key Changes to Your Original Logic #

The critical addition here is the class comparison:

• We fetch the current row's class (currentRow.className.trim()) and compare it to the previous row's class (prevRow.className.trim())
• Rows are only merged if BOTH the cell value and row class are identical

Customization Tips #

1. Target the Correct Column: Adjust targetCellIndex to match the column you want to merge (e.g., 1 for the second column).
2. Handle Multiple Classes: If your rows have multiple classes and you only care about one specific class (like paid or unpaid), replace the class check with:

   const classesMatch = currentRow.classList.contains('your-target-class') && prevRow.classList.contains('your-target-class');
   

3. Dynamic Table Updates: If your table is updated dynamically (e.g., via AJAX), call mergeRowsByValueAndClass() again after the table content is refreshed.

Example Behavior #

Suppose you have rows like this:

<tr class="paid"><td>Property A</td><td>$100</td></tr>
<tr class="paid"><td>Property A</td><td>$100</td></tr>
<tr class="unpaid"><td>Property A</td><td>$100</td></tr>

The first two rows will be merged (same value + same class), but the third row will not merge with them (different class), even though the cell value is identical.

内容的提问来源于stack exchange，提问作者thepersonwho