高效合并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行开始(跳过表头)
        const currentValue = table.rows[i].cells[columnIndex].innerText;

        if(currentValue === previousValue) {
            table.rows[i].cells[columnIndex].style.display = "none";
            rowspan++;
            table.rows[i - rowspan + 1].cells[columnIndex].rowSpan = rowspan;
        } else {
            previousValue = currentValue;
            rowspan = 1;
        }
    }
}

方法二：使用服务器端处理（PHP示例）

function mergeTableRows($array, $keyColumn) {
    $result = [];
    $previousValue = null;
    $currentRowspan = 1;

    foreach($array as $row) {
        if($row[$keyColumn] === $previousValue) {
            $currentRowspan++;
            end($result)[$keyColumn.'_rowspan'] = $currentRowspan;
            $row['_skip'] = true;
        } else {
            $previousValue = $row[$keyColumn];
            $currentRowspan = 1;
        }
        $result[] = $row;
    }

    return $result;
}

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

/* 仅适用于相邻相同单元格视觉合并 */
td {
    position: relative;
}

td:not(:empty) + td:not(:empty) {
    margin-left: -1px; /* 视觉上合并边框 */
}

方法四：使用前端框架（Vue示例）

// Vue组件中
methods: {
    mergeRows(data, key) {
        return data.reduce((acc, curr) => {
            const last = acc[acc.length - 1];
            if (last && last[key] === curr[key]) {
                last._span[key] = (last._span[key] || 1) + 1;
            } else {
                curr._span = { [key]: 1 };
                acc.push(curr);
            }
            return acc;
        }, []);
    }
}

最佳实践建议

1. 预处理数据：在生成HTML前先对数据进行分组和合并计算
2. 性能考虑：对于大型表格，使用虚拟滚动技术
3. 可访问性：确保合并后的表格仍然保持语义化和可访问性
4. 动态更新：如果表格数据会变化，考虑使用响应式框架

注意事项

• 合并行后要确保rowspan属性正确设置
• 保留原始数据以备排序和过滤需求
• 考虑跨浏览器兼容性
• 对于复杂合并需求，可能需要使用专门的表格库如Handsontable或ag-Grid

您需要针对哪种具体场景实现表格合并？我可以提供更具体的解决方案。