jQuery-:contains("")查询包含值的用法实例

最新推荐文章于 2021-07-02 17:32:56 发布

Vivinia_Vivinia

最新推荐文章于 2021-07-02 17:32:56 发布

阅读量5.3k

点赞数 3

分类专栏： jQuery 文章标签：实例 jquery contains td

本文链接：https://blog.csdn.net/hester_hester/article/details/51124595

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目标效果：

输入内容点击select按钮，可以使表格中包含输入内容的td改变css样式，再次输入新的td改变样式，原先td恢复原样。

1.创建项目，导入jQuery框架。

2.新建check.html页面。

check.html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("#select").click(function () {
                $("td").removeClass("checked");   //在查询一次后对应td发生变化，再次输入查询时，需要将上一次的td恢复原样，所以需要将所有td去掉css样式类
                $("td:contains(" + $("#selectText").val() + ")").addClass("checked");   //匹配所有td中包含输入框值得td，并添加css样式类
            });
        });
    </script>
    <style>
        .checked
        {
            background-color:#00ff00;
            }
    </style>
</head>
<body>
    <table id="student" border="1">
        <tr>
            <td>姓名</td>
            <td>专业</td>
            <td>年级</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>软件技术</td>
            <td>2011</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>网络技术</td>
            <td>2012</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>软件技术</td>
            <td>2012</td>
        </tr>
    </table>
    <input type="text" id="selectText"/>
    <button id="select">select</button>
</body>
</html>

3.运行就可以看到目标效果了。

Vivinia_Vivinia

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery-:contains("")查询包含值的用法实例

目标效果：输入内容点击select按钮，可以使表格中包含输入内容的td改变css样式，再次输入新的td改变样式，原先td恢复原样。1.创建项目，导入jQuery框架。2.新建check.html页面。check.html页面： $(function () { $("#selec
复制链接

扫一扫