表内含有多个INPUT,搜索文本进行高亮显示.
代码如下:

<table id="test">
<tr>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="aaabbbaaabbbaaa"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
<tr>
<td><input value="aaacccbbbbcccc"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
<td><input value="testsetsetestestsetsetsetset"></input></td>
</tr>
</table>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手:周杰伦 专辑:依然范特西 
你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样 
菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>
<input type="text" value="输入要查询的内容" id="txtFind">
<input type="button" value="表查找" onclick="searchclick()">
<input type="button" value="简单查找" onclick="findText(txtFind.value)">

<script language="javascript">...
var searchobj = new Object;
var rng = new Object;
searchobj.row = -1;
searchobj.col = -1;
function searchclick()...{
findText2("test",txtFind.value);
} 
function findText2(tabname,str)...{
var tab = document.getElementById(tabname);
var rowobj = tab.rows;
//行数
var rownum = rowobj.length;
if(searchobj.row != -1 && searchobj.col != -1 )...{
var trobj = tab.rows[searchobj.row];
//列数
var tdnum = trobj.cells.length;
//定义一个变量,作为moveStart()函数的偏移量,即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数,结束点都为末尾,而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",rowobj[searchobj.row].cells[searchobj.col].childNodes[0].value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)...{
return;
}
//如果上次查询结果是最后一列
if(searchobj.col < tdnum-1)...{ 
for(var ii=searchobj.col+1;ii<tdnum;ii++)...{
rng = rowobj[searchobj.row].cells[ii].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)...{
searchobj.col = ii;
return;
}
}
}
//如果上次查询结果不是最后一行
if(searchobj.row != rownum-1)...{
for(var i=searchobj.row+1;i<rownum;i++)...{
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)...{
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")...{
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)...{
searchobj.row = i;
searchobj.col = j;
return;
}
}
if(i==rownum-1 && j==tdnum-1)...{
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
}
}
}
}
else...{
searchobj.row = -1;
searchobj.col = -1;
findText2(tabname,str);
}
}
else
...{
for(var i=0;i<rownum;i++)...{
var trobj = tab.rows[i];
//列数
var tdnum = trobj.cells.length;
for(var j=0;j<tdnum;j++)...{
if(rowobj[i].cells[j].childNodes[0].tagName == "INPUT")...{
rng = rowobj[i].cells[j].childNodes[0].createTextRange();
//搜索到后选择文本
if(rng.findText(str))
rng.select();
if(rng.text==str)...{
searchobj.row = i;
searchobj.col = j;
return;
}
}
if(i==rownum-1 && j==tdnum-1)...{
alert("没有您要查找的内容");
}
}
}
}
}
var rng = document.body.createTextRange();
function findText(str)
...{
debugger;
if(str=="")
return;
//定义一个变量,作为moveStart()函数的偏移量,即开始点跳过选择文本
var num = 0;
if(document.selection)
num = document.selection.createRange().text.length;
//每次调用函数,结束点都为末尾,而开始点是跳过选择文本后的新开始点
rng.moveStart("character",num);
rng.moveEnd("character",txtBox.value.length);
//搜索到后选择文本
if(rng.findText(str))
rng.select();
//搜索到最后的范围还是找不到,则提示搜索完毕,并重新恢复rng最初的范围(否则无法执行新搜索)
if(rng.text!=str)
...{
alert("搜索完毕");
rng = txtBox.createTextRange();
}
rng = txtBox.createTextRange();
} 
</script>
这篇博客介绍了如何使用JavaScript实现表格数据的搜索功能,当用户在INPUT框中输入文本后,能够高亮显示表格中匹配的字符。通过定义函数和操作DOM对象,实现了实时搜索和高亮效果。

被折叠的 条评论
为什么被折叠?



