基于jquery实现表格内容筛选功能实例解析

下面是完整的攻略：

1. 准备工作

1. 引入jQuery库。
2. 在HTML页面中添加表格及筛选区域。

2. 实现筛选功能

1. 给筛选框绑定keyup事件监听，使用val()方法获取输入框的值。

javascript
$("#searchInput").on("keyup", function() {
var inputVal = $(this).val().toLowerCase();
// ...
});

1. 使用jQuery的each()方法遍历表格中每一行，取出每一行的所有数据并与输入框的值进行比对，如果匹配成功则显示该行，否则隐藏该行。

javascript
$("#tableData tr").each(function(index, element) {
if(index !== 0) {
var rowsText = $(element).text().toLowerCase();
if(rowsText.indexOf(inputVal) !== -1) {
$(element).show();
} else {
$(element).hide();
}
}
});

3. 示例说明

示例1

下面是一个简单的HTML表格，我们要实现一个功能，可以根据用户输入的关键字动态筛选出匹配的行。

<div>
    <input type="text" id="searchInput" placeholder="请输入关键字...">
    <table id="tableData">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>25</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>30</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>35</td>
            </tr>
        </tbody>
    </table>
</div>

通过引入jQuery库，我们可以使用如下的JS代码实现筛选功能：

$("#searchInput").on("keyup", function() {
    var inputVal = $(this).val().toLowerCase();
    $("#tableData tr").each(function(index, element) {
        if(index !== 0) {
            var rowsText = $(element).text().toLowerCase();
            if(rowsText.indexOf(inputVal) !== -1) {
                $(element).show();
            } else {
                $(element).hide();
            }
        }
    });
});

示例2

下面是一个更复杂的HTML表格，我们要实现一个功能，可以根据不同的条件对表格内容进行筛选。

<div>
    <label>姓名：</label>
    <input type="text" class="searchInput" data-column="1" placeholder="请输入姓名...">
    <br><br>
    <label>年龄：</label>
    <input type="text" class="searchInput" data-column="2" placeholder="请输入年龄...">
    <br><br>
    <table id="tableData">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>25</td>
                <td>女</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>30</td>
                <td>男</td>
                <td>广州</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>35</td>
                <td>女</td>
                <td>深圳</td>
            </tr>
        </tbody>
    </table>
</div>

我们可以为每个筛选框添加一个data-column属性，用于表示该筛选框对应表格的第几列。然后使用如下的JS代码实现筛选功能：

$(".searchInput").on("keyup", function() {
    var colIndex = $(this).data("column");
    var inputVal = $(this).val().toLowerCase();
    $("#tableData tbody tr").each(function(index, element) {
        var tdVal = $(element).children("td").eq(colIndex - 1).text().toLowerCase();
        if(tdVal.indexOf(inputVal) !== -1) {
            $(element).show();
        } else {
            $(element).hide();
        }
    });
});

以上就是“基于jquery实现表格内容筛选功能实例解析”的完整攻略，希望能够对您有所帮助。