管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

查询绑定数据岛的表格中的文本并修改显示方式的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(/<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,"\\$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>

教程首页 更多教程