在编写web应用程序时,表格是一种常见的数据展示方式。通常,这些表格会包含大量的数据,使得用户需要进行搜索,以便筛选出满足其需求的特定数据。为此,我们可以使用jquery来实现表格搜索功能。
首先,我们需要在HTML中创建一个表格,并在其中添加表头和数据行:
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 25 | 男 |
| 李四 | 30 | 男 |
| 王五 | 28 | 女 |
接下来,我们需要编写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 += '' +
'' + data.name + ' ' +
'' + data.age + ' ' +
'' + data.gender + ' ' +
' ';
});
$('#myTable tbody').html(tableRows);
});在此代码中,我们使用了keyup事件来监听用户输入,并获取文本框中的关键字。然后,我们调用搜索函数,获取过滤后的表格数据,并将其转换为HTML代码,以便更新表格内容。
综上所述,我们使用jQuery编写了一段代码,实现了基于关键字的表格搜索功能。通过这种方式,用户可以方便地查找特定的数据,提高了系统的可用性和用户体验。










