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

复制代码代码如下:
<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（/<spans+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,"\$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（/<spans+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>