jquery插件方式实现table查询功能的简单实例

1. 写插件部分，如下：

;（function（$）{  $.fn.plugin = function（options）{    var defaults = {      //各种属性，各种参数    }    var options = $.extend（defaults, options）;     this.each（function（）{      //功能代码      var _this = this;    }）;  }}）（jQuery）;

附上一个例子：

;（function（$）{$.fn.table = function（options）{var defaults = {//arguments , propertiesevenRowClass : "evenRow",oddRowClass : "oddRow",currentRowClass : "currentRow",eventType : "mouseover",eventType2 : "mouseout",}var options = $.extend（defaults, options）;this.each（function（）{//function codevar _this = $（this）;//even row_this.find（"tr:even:not（"#thead"）"）.addClass（options.evenRowClass）;//_this.find（"#thead"）.removeClass（options.evenRowClass）;// odd row _this.find（"tr:odd"）.addClass（options.oddRowClass）;/*_this.find（"tr"）.mouseover（function（）{$（this）.addClass（options.currentRowClass）;}）.mouseout（function（）{$（this）.removeClass（options.currentRowClass）;}）;*/_this.find（"tr"）.bind（options.eventType, function（）{$（this）.addClass（options.currentRowClass）;}）;_this.find（"tr"）.bind（options.eventType2, function（）{$（this）.removeClass（options.currentRowClass）;}）;}）;return this;}}）（jQuery）;

html部分调用插件如下：

（）;== （）;==（function（）{}）;==$（document）.ready（）;

等页面加载成功后执行

;$（function（）{  $（"#table1"）.table（{    //arguments , properties   evenRowClass : "evenRow1",   oddRowClass : "oddRow1",   currentRowClass : "currentRow1"}）;}）;

附上代码：

<！doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style>*{margin:0; padding:0;}table{border-collapse:collapse;width:100%;border:1px solid red;margin-top:50px;text-align:center;} tr, th, td{height:30px;border:1px solid red;}.evenRow1{background:red;}.oddRow1{background:orange;}.currentRow1{background:blue;}#ss{float:right;margin-right:100px;}#search{font-size:14px;width:50px;} </style><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="jquery-table-1.0.js"></script> </head> <body> <script> ;$（function（）{$（"#table1"）.table（{//arguments , propertiesevenRowClass : "evenRow1",oddRowClass : "oddRow1",currentRowClass : "currentRow1"}）;$（"input[type=button]"）.click（function（）{var text = $（"input[type=text]"）.val（）;$（"#table1 tr:not（"#thead"）"）.hide（）.filter（":contains（""+text+""）"）.show（）;}）;}）; </script><div id="ss"> <input type="text" placeholder="请输入查询数据"> <input id="search" type="button" value="查询"> </div> <table id="table1"><tr id="thead"><th>姓名</th><th>学号</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>1</td><td>男</td><td>20</td></tr><tr><td>李四</td><td>2</td><td>男</td><td>30</td></tr><tr><td>张三</td><td>1</td><td>女</td><td>20</td></tr><tr><td>李四</td><td>2</td><td>男</td><td>30</td></tr><tr><td>王五</td><td>3</td><td>男</td><td>30</td></tr><tr><td>王五</td><td>3</td><td>男</td><td>30</td></tr><tr><td>张三</td><td>1</td><td>女</td><td>20</td></tr><tr><td>李四</td><td>2</td><td>男</td><td>30</td></tr> </table> </body></html>

通过这个例子学到了jquery 对象级插件开发
以上这篇jquery插件方式实现table查询功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。