繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 查询绑定数据岛的表格中的文本并修改显示方式的js代码
- Javascript
- 论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”
- JavaScript 撑出页面文字换行
- JavaScript 高级语法介绍
- Javascript 表格操作实现代码
- javascript 获取鼠标的绝对位置 event
- Input 特殊事件onpopertychange和oninput
- javascript 一段左右两边随屏滚动的代码
- JS 分号引起的一段调试问题
- 根据服务器时间作为起始，显示时钟的小程序
- js 匿名调用实现代码
- javascript 缓冲效果 实现代码
- javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码
- javascript 获取radio的value的函数 [已测]
- Javascript 代码也可以变得优美的实现方法
- 使弱类型的语言JavaScript变强势
- js 单引号 传递方法
- 利用WebBrowser彻底解决Web打印问题（包括后台打印）
- web 页面分页打印的实现
- 可以拖动的div 实现代码
- WordPress 照片lightbox效果的运用几点
Javascript 中的 查询绑定数据岛的表格中的文本并修改显示方式的js代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 272 ::
收藏到网摘: n/a
查询绑定数据岛的表格中的文本并修改显示方式的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>
评论 (0) All
