基于JavaScript实现两个HTML表格的动态差异对比及样式标记需求

这里给你实现了完整的表格对比功能，完全符合你的三个需求，下面是可直接运行的代码，还有详细的实现说明：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        table { 
            border: 1px solid black; 
            border-collapse: collapse; /* 合并边框更美观 */
            margin: 10px;
        }
        th, td { 
            border: 1px solid black; 
            padding: 8px;
            text-align: left;
        }
        .missing { 
            background-color: #ffcccc; 
            font-weight: bold;
        }
        .diff-table1 {
            background-color: red !important; /* 确保覆盖原有行内样式 */
        }
        .diff-table2 {
            background-color: green !important;
        }
    </style>
</head>
<body>
    <table id="table_1">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>状态</th> <!-- 新增列用于显示行的存在状态 -->
        </tr>
        <tr>
            <td>1</td>
            <td>per</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Tom</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>notexist</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table id="table_2">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>状态</th> <!-- 新增列用于显示行的存在状态 -->
        </tr>
        <tr>
            <td>1</td>
            <td>per</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Tom</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>alex</td>
            <td>33</td>
            <td></td>
        </tr>
    </table>

    <script>
        // 获取表格DOM元素
        const firstTable = document.getElementById('table_1');
        const secondTable = document.getElementById('table_2');

        // 辅助函数：把表格数据转换成以id为键的对象，方便快速查找匹配行
        function parseTable(table) {
            const dataMap = {};
            const rows = table.rows;
            
            // 跳过表头，从第二行开始遍历数据行
            for (let i = 1; i < rows.length; i++) {
                const row = rows[i];
                const id = row.cells[0].textContent.trim();
                
                // 存储行元素和每个单元格的文本内容
                dataMap[id] = {
                    rowElement: row,
                    cellContents: [
                        row.cells[0].textContent.trim(),
                        row.cells[1].textContent.trim(),
                        row.cells[2].textContent.trim()
                    ]
                };
            }
            return dataMap;
        }

        // 解析两个表格的数据为映射对象
        const table1Data = parseTable(firstTable);
        const table2Data = parseTable(secondTable);

        // 第一步：对比table1的行在table2中的存在情况及内容差异
        Object.keys(table1Data).forEach(id => {
            const table1RowInfo = table1Data[id];
            
            // 如果table2中没有这个id，标记该行"不存在"
            if (!table2Data[id]) {
                table1RowInfo.rowElement.classList.add('missing');
                table1RowInfo.rowElement.cells[3].textContent = '不存在';
                return;
            }

            // 如果id匹配，逐单元格对比内容
            const table2RowInfo = table2Data[id];
            table1RowInfo.cellContents.forEach((content, idx) => {
                if (content !== table2RowInfo.cellContents[idx]) {
                    // 给table1的差异单元格加红色背景
                    table1RowInfo.rowElement.cells[idx].classList.add('diff-table1');
                    // 给table2的对应差异单元格加绿色背景
                    table2RowInfo.rowElement.cells[idx].classList.add('diff-table2');
                }
            });
        });

        // 第二步：标记table2中在table1不存在的行
        Object.keys(table2Data).forEach(id => {
            const table2RowInfo = table2Data[id];
            if (!table1Data[id]) {
                table2RowInfo.rowElement.classList.add('missing');
                table2RowInfo.rowElement.cells[3].textContent = '不存在';
            }
        });
    </script>
</body>
</html>

核心实现细节 #

• 高效数据映射：用parseTable函数把表格行转换成以id为键的对象，避免了嵌套循环遍历，大幅提升查找效率，尤其是表格行数较多时。
• 不存在行标记：给不存在的行添加missing类（浅红色高亮），并在新增的"状态"列明确显示"不存在"，直观清晰。
• 差异单元格处理：当id匹配时逐单元格对比文本内容，不一致的单元格分别添加对应的样式类，用!important确保样式能覆盖原有的行内样式（比如你示例中的红色背景）。
• 样式优化：添加了边框合并、单元格内边距等样式，让表格看起来更美观易读。

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