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

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

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

本文實例為大家分享了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)文章

前端在瀏覽器端播放直播流協(xié)議的2種方式講解
直播依賴錄播所需要的播放技術(shù),同時依賴HTTP FLV或者WebSocket中的一種協(xié)議來傳輸FLV,這篇文章主要給大家介紹了關(guān)于前端在瀏覽器端播放直播流協(xié)議的2種方式,需要的朋友可以參考下
2024-07-07
詳解可以用在VS Code中的正則表達(dá)式小技巧
這篇文章主要介紹了詳解可以用在VS Code中的正則表達(dá)式小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
ajax分頁效果（bootstrap模態(tài)框）
這篇文章主要為大家詳細(xì)介紹了ajax分頁效果的實現(xiàn)方法，結(jié)合bootstrap模態(tài)框使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
前端實現(xiàn)界面元素拖拽功能的3種方式總結(jié)(親測有效)
這篇文章主要介紹了前端實現(xiàn)界面元素拖拽功能的3種方式,三種方法分別是純HTML+CSS+JS、Vue模板和Vue全局指令,每種方法都通過監(jiān)聽鼠標(biāo)事件來實現(xiàn)元素的拖動功能,并通過控制閥來確保只有在指定區(qū)域按下鼠標(biāo)時才開始拖動,需要的朋友可以參考下
2025-02-02
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下
2022-09-09
JS模擬實現(xiàn)Select效果代碼
這篇文章主要介紹了JS模擬實現(xiàn)Select效果代碼,涉及JavaScript基于鼠標(biāo)點擊事件動態(tài)操作頁面元素實現(xiàn)Select效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
解決微信小程序中的滾動穿透問題
這篇文章主要介紹了解決微信小程序中的滾動穿透問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
JS自定義對象創(chuàng)建與簡單使用方法示例
這篇文章主要介紹了JS自定義對象創(chuàng)建與簡單使用方法,結(jié)合實例形式分析了JavaScript創(chuàng)建與使用自定義對象的相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
用表格輸出1-1000之間的數(shù)字實現(xiàn)代碼(附特效)
本文將介紹下用表格輸出1-1000之間的數(shù)字同時附有特效，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-04-04
js繼承實現(xiàn)方法詳解
這篇文章主要介紹了js繼承實現(xiàn)方法,結(jié)合實例形式分析了javascript繼承的實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下
2016-12-12