JS实现表格搜索内容

页面有表格的时候我们都会含有搜索功能，例如：

html和CSS略（源码滑倒底部），直接上JS：

function myFunction() { //如果有搜索按钮，定义一个onclick即可// 声明变量var input, filter, table, tr, td, i;input = document.getElementById("myInput");filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写table = document.getElementById("myTable");tr = table.getElementsByTagName("tr");// 循环表格每一行，查找匹配项for (i = 0; i < tr.length; i++) {td = tr[i].getElementsByTagName("td")[0]; //这个0时要搜索第1列的内容，以此类推if (td) {if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {  //如果要区分大小写就去掉这个toUpperCase()tr[i].style.display = "";} else {tr[i].style.display = "none";}} }
}

这里只能搜索第1列名称的内容，想搜索城市搜不出来的，如果你想搜索第1列和第2列中任意内容，修改下面这行内容即可：

td = tr[i].getElementsByTagName("td")[0];//想搜索哪列内容就都放进去
td1 = tr[i].getElementsByTagName("td")[1];

这就可以搜索第1和第2列的内容了，即可搜索第一列的名称和第2列的城市，赶紧试试效果吧！

整体修改代码（看看跟上面的有啥区别）：

function myFunction() { //如果有搜索按钮，定义一个onclick即可// 声明变量var input, filter, table, tr, td,td1, i;input = document.getElementById("myInput");filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写table = document.getElementById("myTable");tr = table.getElementsByTagName("tr");// 循环表格每一行，查找匹配项for (i = 0; i < tr.length; i++) {td = tr[i].getElementsByTagName("td")[0]; //这个0时要搜索第1列的内容，以此类推td1 = tr[i].getElementsByTagName("td")[1];    if (td || td1) {if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || td1.innerHTML.toUpperCase().indexOf(filter) > -1) {  //如果要区分大小写就去掉这个toUpperCase()tr[i].style.display = "";} else {tr[i].style.display = "none";}} }
}

锦上添花功能：

如果你想加上输入完搜索内容后，按 回车键 触发搜索，代码如下（直接复制可用）：

 document.onkeydown = function (e) {if (!e) e = window.event;if ((e.keyCode || e.which) == 13) {var obtnLogin = document.getElementById("HuiCheSousuo");   //HuiCheSousuo为按钮IDobtnLogin.focus();fun();//提交按钮触发的方法}}

源码路径：JavaScript 表格数据搜索 | 菜鸟教程

还有一个推荐：https://www.jb51.net/article/139940.htm

代码都很类似，万变不离其中。

function onku(obj){//js函数开始setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取var storeId = document.getElementById('store');//获取table的id标识var rowsLength = storeId.rows.length;//表格总共有多少行var key = obj.value;//获取输入框的值var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起，如果是多列呢？用数组？自己测试看看；for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，storeId.rows[i].style.display='';//显示行操作，}else{storeId.rows[i].style.display='none';//隐藏行操作}}},200);//200为延时时间}

JS实现表格搜索内容相关推荐

Layer.js实现表格溢出内容省略号显示,悬停显示全部
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS合并表格中内容一样的单元格
1.页面效果 2.js代码 function mergeCells() {var colNumber = tablecontent.rows.item(0).cells.length; //获取表格列 ...
js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容
项目中遇到如果表格内容太多的话页面会很丑,所以想到给表格一个最大宽度之类的,当内容超出时用三个点代替超出的部分,当鼠标悬停时显示全部的信息,下面百度到两个案例,都可以实现: 1.在表格下面在添加一模一 ...
html表格查找,js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下表格数据搜索名称城市 Alfreds Futterkiste Germany Berglunds snabbkop S ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
***************************************************************** js动态添加表的列,并在列中添加控件的方法<html> ...
jquery.dataTable.js 绘制表格使用详解
dataTable.js绘制表格真的是很不错,下面看看如何应用吧. 先导入dataTable.js的库吧! 定义html页面. <div><div id="result&q ...

JS实现表格搜索内容

JS实现表格搜索内容相关推荐

最新文章

热门文章