Java Script+CSS+HTML前端实现从table中按属性搜索，只显示搜索结果条目，写一段示例代码

当用户在输入框中输入关键字时，可以使用JavaScript来实现从table中按属性搜索，并只显示搜索结果条目。以下是一个示例代码：

HTML部分：

<input type="text" id="searchInput" placeholder="输入搜索关键字">
<table id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>销售员</td>
    </tr>
  </tbody>
</table>

JavaScript部分：

const searchInput = document.getElementById('searchInput');
const dataTable = document.getElementById('dataTable');

searchInput.addEventListener('input', function() {
  const searchKeyword = searchInput.value.toLowerCase();
  const rows = dataTable.getElementsByTagName('tr');
  
  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].getElementsByTagName('td');
    let found = false;
    
    for (let j = 0; j < cells.length; j++) {
      const cellValue = cells[j].innerText.toLowerCase();
      
      if (cellValue.includes(searchKeyword)) {
        found = true;
        break;
      }
    }
    
    if (found) {
      rows[i].style.display = '';
    } else {
      rows[i].style.display = 'none';
    }
  }
});

在上述示例代码中，我们首先获取输入框和数据表格的DOM元素。然后，我们为输入框添加一个`input`事件监听器，当用户输入时触发。

在事件处理程序中，我们首先获取输入框的值，并将其转换为小写字母。然后，我们遍历数据表格的每一行，并获取每一行的单元格。对于每个单元格，我们将其文本内容转换为小写字母，并检查是否包含搜索关键字。

如果某个单元格包含搜索关键字，我们将`found`标志设置为`true`，并跳出内部循环。否则，我们将该行的`display`样式设置为`none`，即隐藏该行。

最后，根据`found`标志的值，决定是否显示该行。

通过这段代码，当用户输入关键字时，只有匹配的行会显示，不匹配的行会被隐藏起来。