查詢綁定數據島的表格中的文本并修改顯示方式的js代碼

2019-11-21 00:54:25

字體：大中小

來源：轉載

供稿：網友

 
<script language="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;i<TDs.length;i++){ 
var tdObj=TDs[i]; 
var obj=tdObj.childNodes[0]; 
if(!obj.className || obj.className!="highlight"){ 
var t=obj.innerHTML.replace(/<span/s+class=.?highlight.?>([^<>]*)<//span>/gi,"$1"); 
obj.innerHTML=t; 
var cnt=loopSearch(s,obj); 
t=obj.innerHTML; 
var r=/{searchHL}(({(?!//searchHL})|[^{])*){//searchHL}/g; 
t=t.replace(r,"<span class='highlight'>$1</span>"); 
obj.innerHTML=t; 
num=num+cnt; 
} 
} 
alert("查找到關鍵字"+num+"處"); 

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

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; 
} 

function replace(s,dest){ 
var r=new RegExp(s,"gi"); 
var tm=null; 
var t=dest.nodeValue; 
var cnt=0; 
var arr=new Array(); 
var a=""; 
var b=""; 
if(tm=t.match(r)){ 
cnt=tm.length; 
a=tm.toString(); 
arr=a.split(","); 
for(var i=0;i<arr.length;i++) 
b="{searchHL}"+arr[i]+"{/searchHL}"; 
t=t.replace(r,b); 
dest.nodeValue=t; 
} 
return cnt; 
} 

</script> 
<style type="text/css"> 
.highlight{background:blue;font-weigh:bold;color:black;} 
</style> 

以上方法需要注意的有兩點:1,在findAll 中obj取到最小單位,否則的話替換會出亂,我在實踐中體會這一點主要是和數據島綁定有關,一般的文本是不需要這么小心的.2,replace方法將tm拆分成數組,也和表格有關,一般的文本不需要拆分

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

復制代碼代碼如下:

 
<script language="JavaScript"> 
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/s+class=.?highlight.?>([^<>]*)<//span>/gi,"$1"); 
obj.innerHTML=t; 
var cnt=loopSearch(s,obj); 
t=obj.innerHTML 
var r=/{searchHL}(({(?!//searchHL})|[^{])*){//searchHL}/g 
t=t.replace(r,"<span class='highlight'>$1</span>"); 
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; 
} 

</script> 

html部分

復制代碼代碼如下:

 
<XML ID="DataBinding1" SRC="datasource.xml"></XML> 
<body> 
<input name="s" id="s" title="搜索內容："/><input type="submit" value="搜索" onClick="findAll(s.value);return false;"/> 
<table width="100%" valign="top" DATASRC="#DataBinding1" id="DataT1" BORDER="1" CELLPADDING="3"> 
<thead> 
<tr> 
<th>ID</th> 
<th>Name</th> 
<th>Desc</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><span name="ID" id="ID" datafld="CODE_ID"> </span></td> 
<td><span name="name" id="name" datafld="CODE_NAME"> </span></td> 
<td><span name="desc" id="desc" datafld="CODE_DESC"> </span></td> 
</tr> 
</tbody> 
</table> 
</body> 

復制代碼代碼如下:

 

<?xml version="1.0" encoding="UTF-8"?> 
<INVENTORY> 
<ROW> 
<CODE_ID>PCOMM11</CODE_ID> 
<CODE_NAME>caracter handle</CODE_NAME> 
<CODE_DESC>hkdlhglfghfkgfk</CODE_DESC> 
</ROW> 
<ROW> 
<CODE_ID>PCOMM12</CODE_ID> 
<CODE_NAME>digital handle</CODE_NAME> 
<CODE_DESC>hkdlhglfghfkgfkgggg</CODE_DESC> 
</ROW> 
</INVENTORY> 