自动筛选符合条件的行数

来源:互联网 发布:沙发买什么品牌好 知乎 编辑:程序博客网 时间:2024/05/18 03:47

实现:

1.输入框:输入时,输入框背景灰色,边框黑色

2.姓名筛选:输入文字,自动筛选符合条件的行,并显示匹配的人数。

js代码

$(document).ready(function () {    $('#searchText').focus(function () {//焦点在id=searchText时        $(this).addClass('inputBackground');    });    $('#searchText').blur(function () {//焦点不在id=searchText时        $(this).removeClass('inputBackground');    });});setInterval('find()', 1000);//每秒执行find()一次var content, key, myTr, count;var find = function () {    var result = document.getElementById('result');//获取id=result的dom对象    key = document.getElementById('searchText').value;//获取id=searchText的值,输入的值    myTr = $('tbody tr:not(".classtitle")');//选择tbody下不包含classtitle类的的tr    if (key != null && key != "") {        myTr.hide();        count = 0;//计数        for (var i = 0; i < myTr.length; i++) {            content = myTr.eq(i).children().eq(1).text();//获取每个选中的tr中的第二个td中的值            for (var ii = 0; ii < content.length; ii++) {                if (content.substr(0, ii + 1) == $.trim(key)) {//将td中的值与输入的值进行比较                // if (content.indexOf($.trim(key)) > -1) {   这样也行                    count++;                    result.innerHTML = count + "";                    myTr.eq(i).addClass('red').show();//添加前景为红色并显示                }            }            if (count == 0) {                result.innerHTML = "0";            }        }        key = null;    } else {//输入的值为空全部显示        result.innerHTML = "0";        myTr.removeClass().show();    }}

遇到的问题:调要刷新函数时,用setOutTime('xxx()',1000);只能刷新一次,而setInterval('find()', 1000)可多次。

(1)这句“myTr = $('tbody tr:not(".classtitle")');”中的“tr:not”,一定不用有空格,不然选择不到。

(2)“var content, key, myTr, count;”多次调用的变量尽量定义在外面,不然容易出现uncaught exception: out of memory错误(内存溢出),之前我的content是定义在for循环里面的。

(3)jquery中的.next()不能大于46,只能连续写46个.next(),因为我用for循环遍历时,后面的数据一直出不来,只能遍历前面那部份的。我之前的遍历(部份代码,不完整)

var find = function () {    var key = document.getElementById('searchText').value;    var myTr = $('tbody tr:not(".classtitle")');//选择tbody下不包含classtitle类的的tr    if (key != null && key != "") {        myTr.hide();        for (var i = 0; i < myTr.length; i++) {            if (myTr.children().eq(1).text() == key) {                myTr.eq(0).addClass('red');                myTr.eq(0).show();            }            myTr = myTr.next();            if(i > 46){                alert(i);//这是不会弹出的            }        }        key = null;    }else{        myTr.removeClass();        myTr.show();    }


0 0
原创粉丝点击