Jquery中使用某个关键字进行查询时，table里面相关文字颜色变化

wo13145219

浏览: 216059 次
性别:
来自: 江西

最近访客更多访客>>

damin

bugyun

ABAP_Brave

qxg1123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
Jquery
html

jquery javascript xhtml 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>Table word Color Change</title>

    <script language="javascript" type="text/javascript" src="jquery-1.3.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            var i = 0;
            //在文本框中输入文字时，按下Enter键
            $("#txtc1").keydown(function(e) {
                var curKey = e.which;
                //如果curKey等13时，说明是Enter键
                if (curKey == 13) {
                    var txtQuery = $("#txtc1").val();
                    if (i >= 1) {
                        var Qt = txtQuery;
                        txtQuery = Qt;
                        $("#TT").load();

                    }
                    //判断是否为空
                    if (txtQuery == "") {
                        alert("不能为空，请输入");
                        return;
                    }
                    else {
                        //全文查找出现的所有txtQuery
                        var reg = new RegExp(txtQuery,'g');
                        //循环遍历整个table中td
                        $("td").each(function() {
                            //获取整个table内容
                            var bb = $(this).html();
                            //匹配整个
                            var cc = bb.replace(reg, '<span style="color:#F00">' + txtQuery + '</span>');
                            $(this).html(cc);
                        });
                        i++;
                    }
                }
            });
        });
    </script>

    <style type="text/css">
        .style1
        {
            height: 23px;
        }
        .style2
        {
            height: 25px;
        }
        body
        {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }
    </style>
</head>
<body>
    <input type="text" id="txtc1" />
    <table width="100%" class="get1" style="border-color: Blue; border-style: groove"  id="TT">
        <tr>
            <td class="style2">
                1
            </td>
            <td class="style2">
                2
            </td>
            <td class="style2">
                3
            </td>
        </tr>
        <tr>
            <td class="style1">
                3
            </td>
            <td class="style1">
                3
            </td>
            <td class="style1">
                4
            </td>
        </tr>
    </table>
</body>
</html>

分享到：

编写Jquery插件 | asp.net谷歌地图api调用

2014-03-05 16:29
浏览 2016
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery中使用某个关键字进行查询时，table里面相关文字颜色变化

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery中使用某个关键字进行查询时，table里面相关文字颜色变化

评论

发表评论

相关推荐

解决input type=password在浏览器会自动填充密码的问题

html禁止清除input文本输入缓存

jQuery.autocomplete.js乱码问题

js 日历控件乱码问题

COTree公司组织结构树控件js特效

table合并列

jquery table 操作

jQuery.holdReady(hold)

$(document).ready()和window.onload区别

Jquery cookies操作

编写Jquery插件

asp.net谷歌地图api调用

label标签的for属性

冲突解决多个Jquery包和其他前端js包命名冲突问题

JS包含在HTML文件中正常，包含在ASPX文件中就报错

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

Jquery的$命名冲突

JS调用CS里的方法：PageMethods

Automation服务器不能创建对象_的多种解决办法

html:target几种介绍

最近访客更多访客>>