您的当前位置：首页查询绑定数据岛的表格中的文本并修改显示方式的js代码_javascript技巧

查询绑定数据岛的表格中的文本并修改显示方式的js代码_javascript技巧

来源：喜迪情感

代码如下:

function findAll(s){
if(s.length==0){
alert("请输入查询关键字");
}

s=encode(s);
var TDs=document.all.DataT1.all.tags("TD");
var num=0;
for(var i=0;ivar tdObj=TDs[i];
var obj=tdObj.childNodes[0];
if(!obj.className || obj.className!="highlight"){
var t=obj.innerHTML.replace(/([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML;
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g;
t=t.replace(r,"$1");
obj.innerHTML=t;
num=num+cnt;
}
}
alert("查找到关键字"+num+"处");

}
function encode(s){
return s.replace(/&/g,"&").replace(//g,">").replace(/([\\\.\*\[\]\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\$[\\\.\*\[\]\($\$\^])/g,"$1").replace(/>/g,">").replace(/}

function loopSearch(s,obj){
var cnt=0;
if(obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for(var i=0,c;c=obj.childNodes[i];i++){
if(!c.className || c.className!="highlight")
cnt+=loopSearch(s,c);

}
return cnt;
}

以上方法需要注意的有两点:1,在findAll 中obj取到最小单位,否则的话替换会出乱,我在实践中体会这一点主要是和数据岛绑定有关,一般的文本是不需要这么小心的.2,replace方法将tm拆分成数组,也和表格有关,一般的文本不需要拆分

如果是一般的文本可以如下写

代码如下:

function findAll(s){
if (s.length==0){
alert('搜索关键词未填写！');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"$1");
obj.innerHTML=t;
alert("搜索到关键词"+cnt+"处")
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}

html部分
代码如下:

ID	Name	Desc

代码如下:

PCOMM11
caracter handle
hkdlhglfghfkgfk

PCOMM12
digital handle
hkdlhglfghfkgfkgggg