jquery 模糊查询tabled的ID标识-CFANZ编程社区

使用jQuery实现模糊查询table的ID标识

介绍

在开发过程中，经常会遇到需要对table中的数据进行模糊查询的情况。使用jQuery可以方便地实现这一功能。本文将介绍实现模糊查询table的ID标识的步骤，并给出相应的代码示例。

步骤

步骤	描述
1	创建一个包含table的HTML页面
2	添加一个输入框和一个按钮，用于输入查询关键字和触发查询操作
3	编写jQuery代码，监听按钮的点击事件，并获取输入框中的查询关键字
4	遍历table中的每一行，判断是否包含查询关键字
5	对包含查询关键字的行进行标识

代码示例

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>模糊查询table的ID标识</title>
    <script src="
    <script src="script.js"></script>
</head>
<body>
    <input type="text" id="keyword" placeholder="请输入关键字">
    <button id="search">查询</button>
    <table id="table">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Alice</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bob</td>
            <td>35</td>
        </tr>
    </table>
</body>
</html>

JavaScript代码(script.js)

$(document).ready(function() {
    $('#search').click(function() {
        var keyword = $('#keyword').val(); // 获取输入框中的查询关键字
        $('#table tr').each(function() {
            var id = $(this).find('td:first').text(); // 获取每一行的ID
            var name = $(this).find('td:eq(1)').text(); // 获取每一行的Name
            var age = $(this).find('td:eq(2)').text(); // 获取每一行的Age
            if (id.indexOf(keyword) >= 0 || name.indexOf(keyword) >= 0 || age.indexOf(keyword) >= 0) {
                $(this).addClass('highlight'); // 标识包含查询关键字的行
            } else {
                $(this).removeClass('highlight'); // 取消标识不包含查询关键字的行
            }
        });
    });
});

CSS代码

.highlight {
    background-color: yellow; // 设置标识行的背景色为黄色
}

代码解释

第1步中的HTML代码包含一个包含table的页面结构，还包括一个输入框和一个按钮。
第2步中的JavaScript代码使用jQuery选择器获取输入框中的查询关键字，并为按钮添加点击事件监听。
第3步中的JavaScript代码使用jQuery的each方法遍历table中的每一行，使用find方法获取每一行的ID、Name和Age。
第4步中的JavaScript代码使用indexOf方法判断每一行的ID、Name和Age是否包含查询关键字。
第5步中的JavaScript代码使用addClass方法给包含查询关键字的行添加highlight类，从而标识这些行。

以上就是使用jQuery实现模糊查询table的ID标识的完整步骤和相应的代码示例。通过这种方式，你可以在table中快速找到包含特定关键字的行。希望本文对你有所帮助！