自动筛选符合条件的行数
来源:互联网 发布:沙发买什么品牌好 知乎 编辑:程序博客网 时间: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
- 自动筛选符合条件的行数
- DataTable筛选符合条件的DataRow
- 通过dt筛选符合条件的结果
- 输入时自动筛选符合条件的条目(渐进式搜索)
- Python魔法_筛选符合条件的值
- 统计符合条件的行数、查找最符合某个发生时间的log文件的脚本
- C# List 筛选条件符合项目
- 根据条件让Table中符合条件的行数据变颜色
- vba得到经过自动筛选过的行数
- Linux运维必会(二) - 遍历文件夹,并筛选符合条件的文件名
- Qt qtablewidget 实现筛选功能,显示符合条件的整行信息
- 利用Lambda表达式从实体集合中筛选出符合条件的实体集合
- mysql 对表数据进行求和分组并在结果中筛选符合条件的数据 having group by count
- 找到符合条件的整数
- 找出符合条件的组合
- 找符合条件的整数
- 找符合条件的整数
- 找符合条件的整数
- 杭电5256 序列变换(LIS)
- C#VSVB殊途同归
- 欢迎使用CSDN-markdown编辑器
- Android 动态测量list view item的高度
- 堆的实现及堆的各种应用
- 自动筛选符合条件的行数
- square的leakcanary库实现分析
- Robot Framework-工具简介及入门使用
- Activity启动模式详解
- 快速排序的两种实现方法
- light--oj--1214-- Large Division
- 段机制
- PM 3
- 放弃Hexo,改用CSDN