bootstrap-使用输入标记过滤表数据

<div class="container">
  <input type="text" id="filterInput" class="form-control" placeholder="输入关键词进行过滤">
  <table id="dataTable" class="table">
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
      </tr>
      <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
      </tr>
      <!-- 其他数据行 -->
    </tbody>
  </table>
</div>

<script>
  const filterInput = document.getElementById('filterInput');
  const dataTable = document.getElementById('dataTable');
  
  filterInput.addEventListener('input', function() {
    const keyword = this.value.toLowerCase();
    const rows = dataTable.getElementsByTagName('tr');
    
    for (let i = 0; i < rows.length; i++) {
      const cells = rows[i].getElementsByTagName('td');
      let match = false;
      
      for (let j = 0; j < cells.length; j++) {
        const cellText = cells[j].textContent.toLowerCase();
        
        if (cellText.includes(keyword)) {
          match = true;
          break;
        }
      }
      
      rows[i].style.display = match ? '' : 'none';
    }
  });
</script>