早上趁还有点时间,分享一下最近在公司写的东西。
通常超连结的语法如下:
<a href="http://tw.yahoo.com" target=_blank>yahoo奇摩</a>
那如果想显示原本的连结时
<a href="http://tw.yahoo.com" target=_blank>http://tw.yahoo.com</a>
可以发现上面 yahoo 的连结出现了两次。那问题就是,有没有简单
的方法,比方以底下的东西就显示出我们想要的结果呢?
<hyper link="http://tw.yahoo.com"></hyper>
特别是当这样的东西非常多行时。
$("hyper").css({
"color":"blue", // 呈现的文字为蓝色
"text-decoration":"underline", // 并加上底线
})
.text(function(){
links=$(this).attr("link"); // 读取 link 属性
$(this).text(links); // 将其内容设为该值
})
.click(function(){
links=$(this).attr("link"); // 读取 link 属性
$(this).css("color","purple"); // 将文字颜色变更为紫色
window.open(links); // 如果使用者点它就开新视窗
});
使用 jQuery,对 document 内的所有 hyper tag 做统一的处理:
css: 令其文字呈现蓝色、并加上底线
text: 令其要出现的文字 = hyper["link"]
click: 如果使用者点了这文字(网址),就开连结到这个网址的新视窗,
同时将该文字(网址)显示为紫色,模拟使用者已点过该连结。
再来是关键字的搜寻功能,假设用 onchange 来模拟
请输入关键字: <input type=text id=inputs onchange='filter_inputs()'>
function filter_inputs()
{
tmp=this.value;
假设我们希望使用者输入的关键字不管是用 , 分隔还是空白分格都行
时,简易的写法如下
tmp=tmp.replace(/ /gi,","); // tmp=substr(tmp," ",",");
tmps=tmp.split(","); // tmps=explode(tmp,",");
// 这样假设输入的关键字是 A B, C, D
// tmp = "A,,B,,C,,,D"
// tmps = ({"A","","B","","C","","","D"})
// 也可以先对 tmps 做处理把 "" 从 tmps 里头移除
接着就是对每一个 tmps 里面的东西,与本文里头表格的每一列去对照:
$("tr").each(function(){ // 相当于 foreach 每一个 <tr>...</tr>
if(tmp=="") break; // 没有给关键字时就显示全部
$(this).css("display","none"); // 默认都先隐藏
tr=$(this).text(); // 读取这一列 tr 标签的文字内容
n=0;
for(i=0;i<tmps.length;i++)
{
if(tmps[i]=="")
n++;
else if(tr.indexOf(tmps[i])>=0) // if(strsrch(tr,tmps[i]))
n++;
}
if(n==tmps.length) // if(n==sizeof(tmps))
$(this).css("display","block");
上面的意思就是说,要比对的关键字共 n 个(以 , 分隔),若其中
有 "" 这种 0 长度字串,n 就加一;若其中有字串存在于 tr 里头
,n 也加一。
最后,若 n = tmps.length 就代表 tmps 内的所有关键字都有存在于
tr 里头,那这个 tr 就是我们要找的,就让它取消隐藏。
搜寻、过滤及排序,再做格式化输出,在资料处理上都是很常见的,
因为有时资料很多,几万行,全部捞出后以表格的方式全部显示出来
固然不难,但是“资料”并不常是我们要的,“资讯”才是。将资料
经过适当的处理才会变成资讯。
上面如果以 asp 或 php 内建的语法或套件来处理其实很简单,若是
以 javascript 来处理的话其实也还好,但今天假若希望不要用到文
字档或是数据库,而是把所有资料使用 table,直接编进网页档里头
,然后直接对该 table 做处理的话,就得思考有哪些处理的方式。
(因为有时候网页存放的空间并不方便再放其它的档案)
而上面提供的,就是一种土法炼钢的做法,默认就是显示全部的内容
,并提供使用者可输入多个关键字去显示过滤后的结果。
继续 coding 了...