当前位置：首页 > JavaScript

js实现多个表联动搜索

2026-04-04 22:37:50JavaScript

实现多表联动搜索的JavaScript方案

数据准备与结构设计

定义多个表格的数据结构，确保关联字段一致。例如主表包含id和name，子表包含id和parentId字段建立关联关系：

const mainTable = [
  { id: 1, name: 'Category A' },
  { id: 2, name: 'Category B' }
];

const subTable = [
  { id: 101, parentId: 1, item: 'Product X' },
  { id: 102, parentId: 1, item: 'Product Y' },
  { id: 103, parentId: 2, item: 'Product Z' }
];

构建搜索函数

创建通用搜索函数处理不同表格的过滤逻辑，通过filter方法实现条件匹配：

js实现多个表联动搜索

function searchTable(data, keyword, fields) {
  return data.filter(item => 
    fields.some(field => 
      String(item[field]).toLowerCase().includes(keyword.toLowerCase())
    )
  );
}

建立联动机制

主表选择变化时触发子表搜索，使用事件监听实现联动：

document.getElementById('main-search').addEventListener('input', (e) => {
  const results = searchTable(mainTable, e.target.value, ['name']);
  renderTable('main-results', results);

  // 联动搜索子表
  const subResults = subTable.filter(item => 
    results.some(mainItem => mainItem.id === item.parentId)
  );
  renderTable('sub-results', subResults);
});

渲染表格数据

动态生成HTML表格显示搜索结果，使用模板字符串构建表格结构：

js实现多个表联动搜索

function renderTable(containerId, data) {
  const container = document.getElementById(containerId);
  container.innerHTML = data.map(item => `
    <tr>
      ${Object.values(item).map(val => `<td>${val}</td>`).join('')}
    </tr>
  `).join('');
}

性能优化建议

对于大数据量场景采用防抖技术，避免频繁触发搜索：

let debounceTimer;
function debouncedSearch() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    // 执行搜索逻辑
  }, 300);
}

完整实现示例

整合所有组件形成完整解决方案，包含HTML结构和CSS样式：

<div class="search-container">
  <input type="text" id="main-search" placeholder="Search main table...">
  <table id="main-results"></table>

  <input type="text" id="sub-search" placeholder="Search sub table...">
  <table id="sub-results"></table>
</div>

通过这种设计模式，可以实现任意数量表格的级联搜索功能，只需扩展数据源和关联逻辑即可。