close

新手學習紀錄（及一堆mur mur)：

最近發現手機版呈現的PIXNET文章，

把一拖拉庫的JS都擋掉了。 哭啊...QAQ

以下紀錄只適合用電腦版或其他平台瀏覽了。

還有一堆blog平台都有自動產生文章目錄TOC功能，

錨點功能巨難用...

 

一不小心前面mur mur太多，速速進入正文：

HTML <table> 表格語法

如何幫一個表格製作出搜尋框。

首先，只需對html表格語法有很基礎的瞭解，下面就是一個極陽春的3x3表格示例及語法：　　　　 　　　　　　 　　　　 　　

時間 地區 人口
1990 東北 5萬
1991 西南 3千

 

 <table>
　　<thead>
　　　　<tr>
　　　　　　<th>時間</th>
　　　　　　<th>地區</th>
　　　　　　<th>人口</th>
　　　　</tr>
　　</thead>

　　<tbody>
　　　　<tr>
　　　　　　<td>1990</td>
　　　　　　<td>東北</td>
　　　　　　<td>5萬</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>1991</td>
 　　　　　　<td>西南</td>
 　　　　　　<td>3千</td>
 　　　　</tr>

　　</tbody>
 </table>

 

想要搜尋表格內容，那我們必須先給表格內容一個名字id，這樣才能定義出搜尋範圍。

那我們就假設id為count，所以設置為<tbody id="count">。

 <table>
　　<thead>
　　　　<tr>
　　　　　　<th>時間</th>
　　　　　　<th>地區</th>
　　　　　　<th>人口</th>
　　　　</tr>
　　</thead>

　　<tbody id="count">
　　　　<tr>
　　　　　　<td>1990</td>
　　　　　　<td>東北</td>
　　　　　　<td>5萬</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>1991</td>
　　　　　　<td>西南</td>
　　　　　　<td>3千</td>
 　　　　</tr>

　　</tbody>
 </table>

 

安裝

打開網站原始碼，將下列語法置於</head>之前。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 <link href="search.css" rel="stylesheet"></script>

 

搜尋輸入文字框

設置一個能讓人輸入關鍵詞的搜尋框。

 <form action="" class="search"><input id="youInput" placeholder="請輸入搜尋字..." type="text"></form>

input id="youInput"，id可自行命名。下方為搜尋的文字框示例：

 

 

JavaScript

最後一步，將下方語法放置在網頁程式碼</body>之前。或文章內原始碼最尾端。

如果前面有自行命名的id，<input id="youInput">和<tbody id="count">，在最後下面的語法中 #youInput 、#count tr，也要跟著一併更改唷。

    <script>

　　　　$(document).ready(function (){

　　　　　　$("#youInput").on("keyup",function (){

　　　　　　　　var value = $(this).val().toLowerCase();

　　　　　　$("#count tr").filter(function (){

　　　　　　　　$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
             
　　　　　　　});

　　　　　　　});
　　　　　});

    </script>

 

成果

最後成果~~ 在下面的文字框搜尋關鍵字就會顯示出來囉!

 
時間 地區 人口
1990 東北 5萬
1991 西南 3千
arrow
arrow
    文章標籤
    JQuery JavaScript 表格搜尋 程式語法
    全站熱搜
    創作者介紹
    創作者 kuku 阿魂 的頭像
    kuku 阿魂

    黃喵喵的儲藏箱

    kuku 阿魂 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄