js实现表内搜索

原创 2007年10月14日 00:37:00
<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>  

# js,根据input框内容实时搜索列表,并添加底色以突出显示

js,根据input框内容实时搜索列表,并添加底色以突出显示js,根据input框内容实时搜索列表,纯前端,下面分三个部分进行展示: 首先,让我们看一下做出来的效果:1.html代码 2.js代码 3...
  • SThranduil
  • SThranduil
  • 2016年08月03日 14:13
  • 2213

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

JS实现表格数据各种搜索功能(忽略大小写,模糊搜索,多关键搜索)               window.onload=function(){     var oTab=docu...
  • u013064109
  • u013064109
  • 2015年02月28日 20:59
  • 2725

JS 页面内容搜索,类似于 Ctrl+F功能的实现代码

WinWebMail
  • yongzhen150
  • yongzhen150
  • 2014年02月26日 10:52
  • 4645

Hybrid App 使用 native.js 实现搜索蓝牙列表

Hybrid App 使用 native.js 实现搜索蓝牙列表
  • u010325508
  • u010325508
  • 2016年12月29日 09:55
  • 393

js实现带有搜索框的可多选的动态下拉列表

参考文章: http://www.2cto.com/kf/201607/526560.htmlcss:.multipleDownListCls * { box-sizing: border-...
  • xyr05288
  • xyr05288
  • 2017年01月20日 18:34
  • 2722

算法练习--二分搜索哈希表-JS 实现

算法练习--二分搜索哈希表-JS 实现
  • csharp25
  • csharp25
  • 2014年12月23日 23:04
  • 1262

下拉列表js实现搜索功能

  • 2017年12月29日 10:16
  • 1KB
  • 下载

java+js实现下拉框提示搜索功能

  • 2010年08月18日 14:37
  • 7KB
  • 下载

像Google一样的预搜索下拉框(前台JS实现)

  • 2008年11月22日 12:47
  • 3KB
  • 下载

chosen.jquery.js美化以及实现模糊搜索

  • 2017年09月01日 14:05
  • 38KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现表内搜索
举报原因:
原因补充:

(最多只允许输入30个字)