php 表格搜索功能,JavaScript_JS实现表格数据各种搜索功能的方法,本文实例讲述了JS实现表格数 - phpStudy...

JS实现表格数据各种搜索功能的方法

本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下:

window.οnlοad=function(){

var oTab=document.getElementById("tab");

var oBt=document.getElementsByTagName("input");

oBt[1].οnclick=function(){

for(var i=0;i

{

var str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();

var str2=oBt[0].value.toUpperCase();

//使用string.toUpperCase()(将字符串中的字符全部转换成大写)或string.toLowerCase()(将字符串中的字符全部转换成小写)

//所谓忽略大小写的搜索就是将用户输入的字符串全部转换大写或小写,然后把信息表中的字符串的全部转换成大写或小写,最后再去比较两者转换后的字符就行了

/*******************************JS实现表格忽略大小写搜索*********************************/

if(str1==str2){

oTab.tBodies[0].rows[i].style.background='red';

}

else{

oTab.tBodies[0].rows[i].style.background='';

}

/***********************************JS实现表格的模糊搜索*************************************/

//表格的模糊搜索的就是通过JS中的一个search()方法,使用格式,string1.search(string2);如果

//用户输入的字符串是其一个子串,就会返回该子串在主串的位置,不匹配则会返回-1,故操作如下

if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}

else{oTab.tBodies[0].rows[i].style.background='';}

/***********************************JS实现表格的多关键字搜索********************************/

//表格的多关键字搜索,加入用户所输入的多个关键字之间用空格隔开,就用split方法把一个长字符串以空格为标准,分成一个字符串数组,

//然后以一个循环将切成的数组的子字符串与信息表中的字符串比较

var arr=str2.split(' ');

for(var j=0;j

{

if(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}

}

}

}

}

姓名:

ID

Name

Age

1Blue152Mikyou263weak244sky355李四18

希望本文所述对大家的javascript程序设计有所帮助。相关阅读:

C++不使用变量求字符串长度strlen函数的实现方法

javascript实现回到顶部特效

node.js中的fs.fstat方法使用说明

alert和confirm功能介绍

位运算实现十进制转换为二进制

Jquery节点遍历next与nextAll方法使用示例

仿网易nec首页动画效果(实现原理+代码)

JavaScript数组对象赋值用法实例

jquery+CSS3模拟Path2.0动画菜单效果代码

jquery validate demo 基础

win7系统使用Windows DVD Maker制作光盘教程分享

javascript中setAttribute()函数使用方法及兼容性

Win8.1系统IE11安装广发银行密码控件不能用解决方法

Bootstrap滚动监听(Scrollspy)插件详解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值