jquery搜索表格内容吗-前端问答-PHP中文网

jquery搜索表格内容吗

WBOY

发布： 2023-05-12 10:54:36

原创

321人浏览过

在编写web应用程序时，表格是一种常见的数据展示方式。通常，这些表格会包含大量的数据，使得用户需要进行搜索，以便筛选出满足其需求的特定数据。为此，我们可以使用jquery来实现表格搜索功能。

首先，我们需要在HTML中创建一个表格，并在其中添加表头和数据行：

<table id="myTable">
  <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>

登录后复制

接下来，我们需要编写jQuery代码来实现搜索功能。首先，我们将表格内容转换为数组，并保存在一个变量中：

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

登录后复制

在此代码中，我们使用了jQuery的each方法来遍历表格的每一行，并将其转换为一个包含3个属性（姓名、年龄、性别）的对象。其中，我们使用了eq方法来获取每个单元格的索引值，并使用text方法来获取单元格中的文本内容。

接下来，我们可以编写一个搜索函数，用于根据用户输入的关键字过滤表格数据。在此函数中，我们使用了jQuery的grep方法，该方法可用于在数组中查找特定元素：

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

登录后复制

在此代码中，我们使用了toLowerCase方法来将关键字和表格数据转换为小写字母，从而实现大小写不敏感的搜索。然后，我们使用indexOf方法来查找包含关键字的表格数据。

最后，我们需要绑定一个事件处理程序，以便在用户输入关键字时调用搜索函数，并更新表格内容：

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

登录后复制

在此代码中，我们使用了keyup事件来监听用户输入，并获取文本框中的关键字。然后，我们调用搜索函数，获取过滤后的表格数据，并将其转换为HTML代码，以便更新表格内容。

综上所述，我们使用jQuery编写了一段代码，实现了基于关键字的表格搜索功能。通过这种方式，用户可以方便地查找特定的数据，提高了系统的可用性和用户体验。

以上就是jquery搜索表格内容吗的详细内容，更多请关注php中文网其它相关文章！