高效合并HTML表格中重复数据的行

合并HTML表格中重复数据的行是一个常见需求，可以通过多种方法实现。以下是几种高效的方法：

方法一：使用JavaScript/jQuery

function mergeDuplicateRows(tableId, columnIndex) {
    const table = document.getElementById(tableId);
    let previousValue = null;
    let rowspan = 1;

    for (let i = 1; i < table.rows.length; i++) { // 从第2行开始(假设第1行是表头)
        const currentValue = table.rows[i].cells[columnIndex].innerText;

        if (currentValue === previousValue) {
            // 隐藏重复的单元格
            table.rows[i].cells[columnIndex].style.display = "none";
            rowspan++;
            // 更新前一个单元格的rowspan
            table.rows[i - rowspan + 1].cells[columnIndex].rowSpan = rowspan;
        } else {
            // 重置计数器
            previousValue = currentValue;
            rowspan = 1;
        }
    }
}

// 使用示例：合并表格"myTable"中第0列的重复数据
mergeDuplicateRows("myTable", 0);

方法二：使用jQuery简化实现

$(document).ready(function() {
    function mergeTableCells(table, columnIndex) {
        let previous = null;
        let cellsToMerge = [];

        $(table).find('tr').each(function() {
            const cell = $(this).find('td:eq(' + columnIndex + ')');
            const current = cell.text();

            if (current === previous) {
                cellsToMerge.push(cell);
            } else {
                if (cellsToMerge.length > 0) {
                    cellsToMerge[0].attr('rowspan', cellsToMerge.length + 1);
                    cellsToMerge.slice(1).forEach(c => c.remove());
                    cellsToMerge = [];
                }
                previous = current;
            }
        });

        // 处理最后一组可能的重复项
        if (cellsToMerge.length > 0) {
            cellsToMerge[0].attr('rowspan', cellsToMerge.length + 1);
            cellsToMerge.slice(1).forEach(c => c.remove());
        }
    }

    // 使用示例
    mergeTableCells('#myTable', 0);
});

方法三：服务器端处理（PHP示例）

function mergeDuplicateRows($data, $keyColumn) {
    $result = [];
    $lastValue = null;
    $rowspan = 1;

    foreach ($data as $row) {
        if ($row[$keyColumn] === $lastValue) {
            $rowspan++;
            // 更新前一行
            $result[count($result)-1]['rowspan'] = $rowspan;
            // 标记当前行为需要合并
            $row['merge'] = true;
        } else {
            $rowspan = 1;
            $lastValue = $row[$keyColumn];
        }
        $result[] = $row;
    }

    return $result;
}

// 在HTML输出时
foreach ($mergedData as $row) {
    echo '<tr>';
    foreach ($row as $key => $value) {
        if ($key === 'rowspan' || $key === 'merge') continue;

        $attributes = '';
        if (isset($row['rowspan']) && $key === $keyColumn) {
            $attributes = ' rowspan="' . $row['rowspan'] . '"';
        }
        if (!isset($row['merge']) || $key !== $keyColumn) {
            echo '<td' . $attributes . '>' . htmlspecialchars($value) . '</td>';
        }
    }
    echo '</tr>';
}

方法四：使用CSS伪类（有限场景）

对于简单的表格，可以使用CSS隐藏重复内容（但不会真正合并单元格）：

/* 隐藏相邻重复单元格 */
td.hide-duplicate + td.hide-duplicate {
    visibility: hidden;
    position: absolute;
}

最佳实践建议

1. 性能考虑：对于大型表格，客户端处理可能影响性能，建议在服务器端完成合并

2. 排序数据：确保数据已按合并列排序，否则合并效果不理想

3. 多列合并：如果需要合并多列，确保这些列的重复模式一致

4. 保留数据：如果后续需要操作数据，考虑使用隐藏而非删除单元格

5. 响应式设计：合并后的表格在小屏幕上可能显示不佳，需测试响应式效果

选择哪种方法取决于你的具体需求、数据量和开发环境。服务器端处理通常最可靠，而客户端处理可以提供更动态的用户体验。