编写表格隔行变色插件

任务描述

编写表格隔行变色插件，并应用插件实现表格隔行变色，如图所示。

任务分析

使用自定义的表格隔行变色插件实现表格隔行变色，可以采用以下步骤：

1.完成静态页面设计，建立表格。

2.引入jQuery库。

3.编写插件。

4.应用插件。

任务实现

1.建立HTML页面

代码如下：

<tableid="table1">

        <thead><tr><th> </th><th>学号</th><th>姓名</th><th>性别</th></tr></thead>

        <tbody>

                 <tr>

                         <td><inputtype="checkbox" name="choice"value=""/></td>

                         <td>20141201</td>

                         <td>陈毅炫</td>

                         <td>男</td>

                 </tr>

                 ……省略类似tr代码

                 <tr>

                         <td><inputtype="checkbox" name="choice" value=""checked="checked" /></td>

                         <td>20141206</td>

                         <td>黄小桂</td>

                         <td>女</td>

                 </tr>

        </tbody>

</table>

2.引入jQuery库

包含jQuery的库文件，代码如下：

 <scripttype="text/javascript"src="js/jquery-1.6.2.min.js"></script>

3.插件编写

代码如下：

;(function($) {

        $.fn.extend({

                 "alterBgColor":function(options){

                 //设置默认值

                         options=$.extend({

                                  odd:"odd",      /* 偶数行样式*/

                                  even:"even", /* 奇数行样式*/

                                  selected:"selected" /* 选中行样式*/

                         },options);

                         $("tbody>tr:odd",this).addClass(options.odd);

                         $("tbody>tr:even",this).addClass(options.even);

                         $('tbody>tr',this).click(function() {

                                  //判断当前是否选中

                                  varhasSelected=$(this).hasClass(options.selected);

                                  /如果选中，则移出selected类，否则就加上selected类

                                 $(this)[hasSelected?"removeClass":"addClass"](options.selected)

                                  //查找内部的checkbox,设置对应的属性。

                                 find(':checkbox').attr('checked',!hasSelected);

                         });

                         // 如果单选框默认情况下是选择的，则高色.

                         $('tbody>tr:has(:checked)',this).addClass(options.selected);

                         return this; //返回this，使方法可链。

                }

        });

})(jQuery);

4.插件应用

$(function(){

        $("#table1")

                 alterBgColor() //应用插件

                 .find("th").css("color","red");//可以链式操作

})

把第9章的任务9.2图片提示效果功能编写为插件。