Re: [閒聊] jQuery

作者: laechan (揮淚斬馬雲)   2018-12-05 09:40:22
早上趁還有點時間,分享一下最近在公司寫的東西。
通常超連結的語法如下:
<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 了...

Links booklink

Contact Us: admin [ a t ] ucptt.com