<html>
<head>
<meta charset="utf-8">
<title>table筛选</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body >
<div > <input name="key" type="text" id="key" onkeydown="onSearch(this)" /></div>
<table id="ks_table" onclick="doclick()">
<tr><td>这是表头</td> </tr>
<tr><td>这是第二行</td> </tr>
<tr><td>这是第三二行</td></tr>
<tr><td>这是第wu行</td></tr>
<tr><td>这是第四行</td></tr>
</table>
<script>
function onSearch(obj){//js函数开始
//alert(rowNo)
setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
var storeId = document.getElementById('ks_table');//获取table的id标识
var rowsLength = storeId.rows.length;//表格总共有多少行
var key = obj.value;//获取输入框的值
//if(key=='') alert("key");
var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
for(var i=0;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，
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为延时时间
}
//这是操作表格的代码
var rowNo= 0;
var tableId = 'ks_table';
var inputId = 'show';
var selectedColor = "blue" //"#FF0000"
var tablelen=document.getElementById(tableId).rows.length
document.getElementById(tableId).rows[0].style.backgroundColor=selectedColor;
function doclick() {
var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
hanghao= td.parentElement.rowIndex;
for(var k=0;k<tablelen;k++)
{
document.getElementById(tableId).rows[k].style.backgroundColor="#FFFFFF";
}
// alert("行号：" + (td.parentElement.rowIndex ) + "，内容：" + td.innerText);
document.getElementById(tableId).rows[hanghao].style.backgroundColor=selectedColor
document.getElementById(inputId).value=document.getElementById(tableId).rows[hanghao].innerText;
rowNo=hanghao;
// var tab = document.getElementById("test");
//表格行数
// var rows = tab.rows.length;
//表格列数
//var cells = tab.rows.item(0).cells.length;
//alert("行数" + rows + "列数" + cells);
// alert(rowNo)
}
document.onkeydown=function(event)
{ //alert(event.keyCode)
//事件的标识代码
//alert("qian"+rowNo)
if (event.keyCode == 38 && rowNo > 0)
{
for(var k=0;k<tablelen;k++)
{
document.getElementById(tableId).rows[k].style.backgroundColor="#FFFFFF";
}
for(var k=0;k<tablelen;k++)
{ rowNo=rowNo-1;
if(document.getElementById(tableId).rows[rowNo%tablelen].style.display=='')
{ document.getElementById(tableId).rows[rowNo%tablelen].style.backgroundColor=selectedColor;
document.getElementById(inputId).value=document.getElementById(tableId).rows[rowNo%tablelen].innerText;
break;
}
else { rowNo=rowNo-1; continue; }
//alert("40hou"+rowNo);
}
//alert("38hou"+rowNo);
} // if (event.keyCode == 38 && rowNo > 0)
//事件的标识代码
if (event.keyCode== 40)
{
for(var k=0;k<tablelen;k++)
{
document.getElementById(tableId).rows[k].style.backgroundColor="#FFFFFF";
}
for(var k=0;k<tablelen;k++)
{ rowNo=rowNo+1;
if(document.getElementById(tableId).rows[rowNo%tablelen].style.display=='')
{ document.getElementById(tableId).rows[rowNo%tablelen].style.backgroundColor=selectedColor;
document.getElementById(inputId).value=document.getElementById(tableId).rows[rowNo%tablelen].innerText;
break;
}
else { rowNo=rowNo+1; continue; }
//alert("40hou"+rowNo);
}
}
}
</script>
<input type="text" id="show" value="do">
网友评论