項目中用到js前端搜索功能，根據 姓名或姓名 進行 搜索，實現方法如下，遍歷table所有行中的某列，符合條件則置tr為display:'',不滿足條件置tr為display:none。
代碼如下：
<html> <head> <title>s表格前端搜索</title> <meta http-equiv="Content-Type" content="text/html;charset=GBK"/> </head> <body> <h1>js表格前端搜索</h1> <label> <input type="radio" name="sex" value="男" onclick="onSearch(this.value,2)"/>男 </label> <label><input type="radio" name="sex" value="女" onclick="onSearch(this.value,2)"/>女 </label> <table id="table1" border="1"> <thead > <tr style="cursor: pointer;"> <td class="listHeadCell">編號</td> <td class="listHeadCell">姓名</td> <td class="listHeadCell">性別</td> </tr> </thead> <tbody id="gridtbody"> <tr> <td name="biaozhi">1</td> <td>名稱1</td> <td>男</td> </tr> <tr> <td name="biaozhi">2</td> <td>名稱2</td> <td>男</td> </tr> <tr> <td name="biaozhi">3</td> <td>名稱3</td> <td>女</td> </tr> <tr> <td name="biaozhi">4</td> <td>名稱4</td> <td>男</td> </tr> </tbody> </table> <br/> <script type="text/javascript"> /** * js 前台搜索 * @param searchContent 搜索的內容 * @col 要搜索的哪一列，這里是第一列，從0開始數起 */ function onSearch(searchContent,col){ setTimeout(function(){//因為是即時查詢，需要用setTimeout進行延遲，讓值寫入到input內，再讀取 var storeId = document.getElementById('table1');//獲取table的id標識 var rowsLength = storeId.rows.length;//表格總共有多少行 var searchCol = col;//要搜索的哪一列，這里是第一列，從0開始數起 for(var i=1;i<rowsLength;i++){//按表的行數進行循環，本例第一行是標題，所以i=1，從第二行開始篩選（從0數起） var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值 //alert(searchText); if(searchText.match(searchContent) || searchText.toUpperCase().match(searchContent.toUpperCase())){//用match函數進行篩選，如果input的值，即變量 key的值為空，返回的是ture， storeId.rows[i].style.display='';//顯示行操作， }else{ storeId.rows[i].style.display='none';//隱藏行操作 } } },20);//20為延時時間 } </script> </body> </html>
效果圖：
限時領取免費Java相關資料，涵蓋了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo/Kafka、Hadoop、Hbase、Flink等高並發分布式、大數據、機器學習等技術。
資料傳送門：https://mp.weixin.qq.com/s/u2b_NVNuMuAPE0w4lc45fw
關注下方公眾號即可免費領取：
