如何动态拆分表格：左div起始右div收尾，适配搜索结果自动分配行数

嘿，这个问题我之前也碰到过——静态拆分表格确实会在筛选后出现分布不均的情况，毕竟原来的拆分逻辑完全没考虑搜索后的动态结果。咱们换个思路，不要提前拆分表格，而是基于搜索结果动态分配行到左右两个表格，这样就能实现你要的均分效果了。

具体实现步骤 #

我给你两种方案，第一种是基于你现有代码的改造，第二种是更干净的“隐藏完整数据源”方案，你可以按需选择：

方案1：基于现有两个表格的改造

如果你不想改动太多现有HTML结构，可以用这种方式，核心是每次搜索时收集所有可见行，再重新分配：

// 监听搜索框输入事件
document.getElementById('search').addEventListener('input', function() {
  // 1. 收集两个表格里所有可见的行（排除被隐藏的）
  const allRows = [...document.querySelectorAll('#table-1 tr, #table-2 tr')];
  const visibleRows = allRows.filter(row => {
    // 如果是用CSS类（比如Bootstrap的.d-none）隐藏行，就改成检查classList
    return getComputedStyle(row).display !== 'none';
  });

  // 2. 计算拆分点：总可见行数的一半，左边放前半，右边放后半
  const splitIndex = Math.floor(visibleRows.length / 2);
  const leftRows = visibleRows.slice(0, splitIndex);
  const rightRows = visibleRows.slice(splitIndex);

  // 3. 清空两个表格的内容（注意保留表头！如果有thead的话）
  const table1 = document.getElementById('table-1');
  const table2 = document.getElementById('table-2');
  const table1Body = table1.querySelector('tbody') || table1;
  const table2Body = table2.querySelector('tbody') || table2;
  table1Body.innerHTML = '';
  table2Body.innerHTML = '';

  // 4. 把行分别插入到左右表格
  leftRows.forEach(row => table1Body.appendChild(row.cloneNode(true)));
  rightRows.forEach(row => table2Body.appendChild(row.cloneNode(true)));
});

注意：如果你的隐藏逻辑是通过添加/移除CSS类实现的，筛选条件要改成!row.classList.contains('d-none')，这样判断会更准确。

方案2：隐藏完整数据源（更推荐）

这种方案逻辑更清晰，把所有原始数据放在一个隐藏的完整表格里，每次搜索时直接筛选数据，再动态生成左右表格的内容，完全避免原有静态拆分的干扰：

第一步：修改HTML结构

<input id="search">
<div class="row">
  <div class="col-lg-6">
    <table id="table-1" class="table">
      <!-- 保留表头，左右表格表头一致 -->
      <thead>
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <!-- 你的其他表头列 -->
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="col-lg-6">
    <table id="table-2" class="table">
      <thead>
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <!-- 你的其他表头列 -->
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<!-- 隐藏的完整表格，存放所有原始行数据 -->
<table id="full-table" style="display: none;">
  <tbody>
    <!-- 你的8行原始数据 -->
    <tr><td>行1内容</td><td>行1详情</td></tr>
    <tr><td>行2内容</td><td>行2详情</td></tr>
    <tr><td>行3内容</td><td>行3详情</td></tr>
    <tr><td>行4内容</td><td>行4详情</td></tr>
    <tr><td>行5内容</td><td>行5详情</td></tr>
    <tr><td>行6内容</td><td>行6详情</td></tr>
    <tr><td>行7内容</td><td>行7详情</td></tr>
    <tr><td>行8内容</td><td>行8详情</td></tr>
  </tbody>
</table>

第二步：编写JS逻辑

// 提前获取所有原始行和表格容器
const allOriginalRows = [...document.getElementById('full-table').querySelectorAll('tr')];
const table1Body = document.getElementById('table-1').querySelector('tbody');
const table2Body = document.getElementById('table-2').querySelector('tbody');

// 搜索处理函数
function updateTables() {
  const searchText = document.getElementById('search').value.trim().toLowerCase();

  // 筛选符合搜索条件的行
  const matchedRows = allOriginalRows.filter(row => {
    const rowContent = row.textContent.toLowerCase();
    // 空搜索时显示所有行，否则匹配包含搜索词的行
    return searchText === '' || rowContent.includes(searchText);
  });

  // 拆分到左右表格：如果是奇数行，左边少一行右边多一行（反过来改splitPoint即可）
  const splitPoint = Math.floor(matchedRows.length / 2);
  const leftRows = matchedRows.slice(0, splitPoint);
  const rightRows = matchedRows.slice(splitPoint);

  // 清空并填充表格
  table1Body.innerHTML = '';
  table2Body.innerHTML = '';

  leftRows.forEach(row => table1Body.appendChild(row.cloneNode(true)));
  rightRows.forEach(row => table2Body.appendChild(row.cloneNode(true)));
}

// 监听搜索框输入
document.getElementById('search').addEventListener('input', updateTables);

// 页面加载时初始化一次，显示默认的均分结果
updateTables();

为什么这个方案可行？ #

原来的静态拆分是基于原始行数的，而搜索后的结果是动态变化的，所以必须每次搜索后重新计算拆分逻辑，把符合条件的行重新分配到左右两个表格里。这样不管搜索后剩下3行还是5行，都能尽量均分显示。

内容的提问来源于stack exchange，提问作者Clément M