檢索table表格資料程式碼例項
本章節分享一段程式碼例項,它實現了檢索表格中資料的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> table { width: 700px; border-collapse: collapse; margin-top: 15px; } td { padding: 10px; border: 1px solid #CCCCCC; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#searchBtn").click(function(){ $("table tr:not(':first')").hide().filter(":contains('"+$("#searchCon").val()+"')").show(); }) }) </script> </head> <body> <input type="text" id="searchCon"> <input type="button" id="searchBtn" value="搜尋"> <table> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>antzone</td> <td>softwhy</td> <td>螞蟻部落</td> </tr> <tr> <td>div教程</td> <td>css教程</td> <td>css教程</td> </tr> <tr> <td>js教程</td> <td>jquery教程</td> <td>ts教程</td> </tr> <tr> <td>json教程</td> <td>ajax教程</td> <td>es6教程</td> </tr> </table> </body> </html>
上面的程式碼實現了我們的要求,程式碼非常簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).:not()可以參閱jQuery :not一章節。
(2).:first可以參閱jQuery :first一章節。
(3).filter()可以參閱jQuery filter()一章節。
(4).:contains可以參閱jQuery :contains一章節
相關文章
- table表格美化程式碼例項
- table表格使用程式碼例項
- js table表格排序程式碼例項JS排序
- table細線表格例項程式碼
- jQuery操作表格table程式碼例項jQuery
- table表格隔行變色程式碼例項
- jQuery table表格隔行換色程式碼例項jQuery
- js table表格操作大全程式碼例項JS
- javascript生成指定行列table表格程式碼例項JavaScript
- javascript動態操作table表格程式碼例項JavaScript
- 刪除table表格行和列程式碼例項
- 獲取table表格有多少列程式碼例項
- table表格單元格合併程式碼例項
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- js迭代table表格的行和列程式碼例項JS
- 將表格資料匯入Excel表程式碼例項Excel
- js動態新增和刪除table表格行程式碼例項JS行程
- js 將xml轉換為table表格簡單程式碼例項JSXML
- javascript動態建立指定行與列table表格程式碼例項JavaScript
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- table表格的thead、tbody和tfoot應用程式碼例項
- 將table表格內容匯入到word或者Excel程式碼例項Excel
- 滑鼠滑過實現table表格行背景變色程式碼例項
- js動態建立table表格和刪除指定行列程式碼例項JS
- table表格單元格橫向和屬性合併程式碼例項
- css細線表格程式碼例項CSS
- js實現的查詢表格中的資料程式碼例項JS
- javascript動態建立table表格並新增資料程式碼JavaScript
- 點選文字框彈出可檢索下拉選單程式碼例項
- table表頭分組程式碼例項
- js遍歷迭代table表格的每一個td單元格程式碼例項JS
- js獲取table表格指定行和列的單元格內容程式碼例項JS
- WPS表格資料應用例項
- 表格行背景交替變色例項程式碼
- jQuery刪除表格指定行程式碼例項jQuery行程
- 點選刪除表格行程式碼例項行程
- easyui-table表格客戶端分頁例項UI客戶端
- js table隔行變色效果程式碼例項JS