快捷導(dǎo)航

js實現(xiàn)表格數(shù)據(jù)搜索

更新時間：2020年08月09日 13:38:38 作者：星辰落海

這篇文章主要為大家詳細介紹了js實現(xiàn)表格數(shù)據(jù)搜索，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)表格數(shù)據(jù)搜索的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表格數(shù)據(jù)搜索</title>
 <link href="../css/表格數(shù)據(jù)搜索.css" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">
<table id="myTable">
 <tr>
  <th>名稱</th>
  <th>城市</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>
<script src="../js/表格數(shù)據(jù)搜索.js">
</script>
</body>
</html>

CSS:

#myInput{
 background: url('https://static.runoob.com/images/mix/searchicon.png')no-repeat;
 background-position: 10px 12px;
 width:100%;
 padding: 12px 20px 12px 40px;
 border:1px solid #ddd;
 font-size: 16px;
 margin-bottom: 12px;
 border-radius: 6px;
}
#myTable {
 width: 100%;
 border: 1px solid #ddd;
 font-size: 18px;
 border-collapse:collapse;
}
#myTable th,td{
 text-align: left;
 padding:15px 12px;
}
#myTable tr{
 /* 表格添加邊框 */
 border-bottom:1px solid #ddd;
}
#myTable tr:hover{
 background-color: #f1f1f1;
}
#myTable th{
 background-color: #f1f1f1;
}

JS:

function myFunction() {
 var myInput=document.getElementById("myInput");
 var filter=myInput.value.toUpperCase();
 var table=document.getElementById("myTable");
 var tr=table.getElementsByTagName("tr");
 //循環(huán)列表每一項，查找匹配項
 for(var i=0;i<tr.length;i++) {
  var td = tr[i].getElementsByTagName("td")[0];
  if (td){
   if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
   } else {
    tr[i].style.display = "none";
   }
  }
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js實現(xiàn)select跳轉(zhuǎn)功能代碼
實現(xiàn)select跳轉(zhuǎn)的方法有很多，本例為大家介紹的是js實現(xiàn)的，通過location.href獲取跳轉(zhuǎn)地址，需要的朋友可以看看
2014-10-10
BootStrap實現(xiàn)郵件列表的分頁和模態(tài)框添加郵件的功能
這篇文章主要介紹了bootstrap分頁，模態(tài)框，實現(xiàn)郵件列表的分頁，和模態(tài)框添加郵件的功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-10-10
詳解JavaScript實現(xiàn)監(jiān)聽路由變化
前端實現(xiàn)路由變化主要有兩種方式，本文主要介紹了這兩種方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
分享一個原生的JavaScript拖動方法
本文給大家分享的是基于JavaScript的setCapture方法實現(xiàn)的拖動效果，非常的簡單實用，有需要的小伙伴可以參考下
2016-09-09
js 只能輸入數(shù)字和小數(shù)點的文本框改進版
以前的版本不能輸入退格鍵等功能。
2009-04-04
js 顯示base64編碼的二進制流網(wǎng)頁圖片
base64簡單地說，它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個HTTP 請求
2014-04-04
js判斷用戶是輸入的地址請求的路徑(實例講解)
下面小編就為大家?guī)硪黄猨s判斷用戶是輸入的地址請求的路徑(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
async/await地獄該如何避免詳解
這篇文章主要給大家介紹了關(guān)于async/await地獄該如何避免的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-05-05
不同瀏覽器對回車提交表單的處理辦法
在瀏覽器中填寫表單的時，可以直接在“文本框”中敲擊“Enter”來提交表單，很是方便。
2010-02-02
深入理解es6塊級作用域的使用
這篇文章主要介紹了深入理解es6塊級作用域的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03