jQuery - 聖殿英雄傳說 MUD

早上趁還有點時間，分享一下最近在公司寫的東西。

通常超連結的語法如下:

<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 了...


--