早上趁還有點時間，分享一下最近在公司寫的東西。 通常超連結的語法如下: <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 了... --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.117.106.224 ※ 文章網址: https://webptt.com/m.aspx?n=bbs/mud_sanc/M.1543974025.A.A9B.html 補充一下 <hyper link=http://tw.yahoo.com></hyper> 可以使用更簡短的語法 <hyper link=http://tw.yahoo.com /> 使用記事本做取代時 尋找字: ></hyper> 替代字: /> ※ 編輯: laechan (122.117.106.224), 12/07/2018 10:27:32