点击‘Remaining’按钮展示Table1未插入Table2的剩余数据方法

一、数据库查询：获取Table1中不在Table2的记录 #

这里提供三种常用的SQL查询方法，你可以根据自己使用的数据库（MySQL、PostgreSQL等）和数据情况选择：

方法1：LEFT JOIN + IS NULL（推荐，兼容性好）

通过左连接两张表，筛选出Table2中匹配字段为空的记录，就是Table1独有的数据。这里假设code是唯一标识字段，如果需要匹配整条记录（比如Name+Amount也要一致），可以修改ON条件：

-- 单字段匹配（code）
SELECT t1.*
FROM Table1 t1
LEFT JOIN Table2 t2 ON t1.code = t2.code
WHERE t2.code IS NULL;

-- 多字段匹配（整条记录完全一致）
SELECT t1.*
FROM Table1 t1
LEFT JOIN Table2 t2 
  ON t1.code = t2.code 
  AND t1.Name = t2.Name 
  AND t1.Amount = t2.Amount
WHERE t2.code IS NULL;

方法2：NOT IN（语法简洁，注意NULL陷阱）

直接筛选Table1中code不在Table2的code列表里的记录，但是如果Table2的code字段存在NULL值，这个查询会返回空结果，使用时要注意：

SELECT *
FROM Table1
WHERE code NOT IN (SELECT code FROM Table2);

方法3：NOT EXISTS（性能优异，适合大数据量）

当Table2的匹配字段有索引时，这种方法的查询效率很高：

SELECT t1.*
FROM Table1 t1
WHERE NOT EXISTS (
    SELECT 1
    FROM Table2 t2
    WHERE t1.code = t2.code
);

二、前端按钮触发与结果展示 #

假设你用的是Web场景，下面是一个简单的前端实现示例，点击按钮后请求后端接口获取数据并渲染表格：

<!-- 按钮 -->
<button id="remainingBtn">Remaining</button>
<!-- 结果展示容器 -->
<div id="resultContainer"></div>

<script>
// 给按钮绑定点击事件
document.getElementById('remainingBtn').addEventListener('click', async () => {
    try {
        // 发送请求到后端接口（这里的接口地址需要替换成你实际的后端接口）
        const res = await fetch('/api/get-remaining-data');
        const remainingRecords = await res.json();
        
        // 渲染结果表格
        let tableHtml = `
            <table border="1" cellpadding="8" cellspacing="0">
                <thead>
                    <tr>
                        <th>code</th>
                        <th>Name</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
        `;
        
        // 遍历数据生成表格行
        remainingRecords.forEach(record => {
            tableHtml += `
                <tr>
                    <td>${record.code}</td>
                    <td>${record.Name}</td>
                    <td>${record.Amount}</td>
                </tr>
            `;
        });
        
        tableHtml += `</tbody></table>`;
        // 将表格插入到结果容器中
        document.getElementById('resultContainer').innerHTML = tableHtml;
    } catch (err) {
        console.error('加载数据失败:', err);
        alert('获取剩余记录出错，请稍后重试');
    }
});
</script>

后端部分只需要编写一个接口，执行上面的SQL查询，把结果以JSON格式返回即可。

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