JavaScript 表格數(shù)據(jù)搜索

本文為大家介紹如何實現(xiàn)一個表格數(shù)據(jù)搜索的功能。

HTML 代碼：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <table id="myTable"> <tr class="header"> <th style="width:60%;">名稱</th> <th style="width:40%;">城市</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> </table>

CSS 代碼：

#myInput { background-image: url('https://static.json.com/images/mix/searchicon.png'); /* 搜索按鈕 */ background-position: 10px 12px; /* 定位搜索按鈕 */ background-repeat: no-repeat; /* 不重復(fù)圖片 */ width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { /* 表格添加邊框 */ border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { /* 表頭及鼠標(biāo)移動過 tr 時添加背景 */ background-color: #f1f1f1; }

JavaScript 代碼：

提示： 如果你需要區(qū)分大小寫可以移除 toUpperCase() 方法。

提示： 如果你需要檢索第二列（城市）可以將 tr[i].getElementsByTagName('td')[0] 修改為 [1] 。索引值從 0 開始，即 0 為第一列，1 為第二列，以此類推。

在線演示

上一篇：JavaScript 搜索框自動提示下一篇：JavaScript constructor 屬性