checkbox全选、table的相关jquey插件设计

先说想做的效果和思路

1.效果。

第一，全选按钮，选择后，所有checkbox的行全选。取消时候，所有checkbox全部取消。其实就是全选和全不选。

第二，隔行变色，

第三，鼠标滑动变色。

2.思路。

第一，其实全选和全不选，都是一个思路，click按钮，遍历所有的checkbox，将checked的值改为false或者ture，有的时候是checked

第二，隔行变色，用的是jquery中的tr:even，这个可是一个神奇啊。不解释。

第三，滑动变色，加深效果。bind的事件为mouseover和mouseout，用过这两个事件来改变效果。

之前我说过开发jquery插件的框架。

命名，起一个牛逼的名字。jquery.tableSelectPlugin.js，注意，jquery的插件就是要这样命名的。jquery.pluginname.js的形式。

html，这个是为table设计的，我们随便写一个table

<table><tr><th><label><input id="allSel" type="checkbox" name="all"/>全选</label></th><th>名称</th><th>详情页</th><th>编辑宝贝</th><th>状态</th><th>预览</th><th>创建时间</th></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item" /></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item" /></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr></table>

你要控制每一个tr，那么他必须有相同的元素，ok其实就是class=item

这是我们遍历的条件。

为了好看点，我加一段简单的css

<style>table { font-size:12px; border:1px solid #dedede; margin:0 auto; }table tr td { border: 1px solid #B1CDE3; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }table tr .title { text-align:left; }</style>

ok，现在我们来搭建jquery的框架

之前我已经讲过了。

直接贴框架的代码

(function($){jQuery.fn.tableSelectPlugin = function(options){var defaults = {id_all: "selAll",cls_item: "item",}var options = $.extend(defaults,options);return this.each(function(){//code....逻辑过程})}})(jQuery);

defaults是默认的。我们观察我们需要控制的ducoment。id_all就是那个全选框的id，cls_item就是相同的tr的class

下面我们来写逻辑过程。

(function($){jQuery.fn.tableSelectPlugin = function(options){var defaults = {id_all: "selAll",cls_item: "item",}var options = $.extend(defaults,options);return this.each(function(){var o = options;var table = $(this);var a = "#" + o.id_all;table.find(a).click(function(){var mk = $(a).attr('checked');if( mk == true ){$('input.'+o.cls_item).each(function(index){var temp = $(this).attr('checked');if(temp == false){$(this).attr('checked',true);}});}else{$('input.'+o.cls_item).each(function(index){var temp = $(this).attr('checked');if(temp == true){$(this).attr('checked',false);}});}});})}})(jQuery);

注意，$(this)的改变。。

全选的问题搞定了。if是全选，else就是全部选了。

从相同的item我们可以发现，增加一个友好的操作。当checkbox有选中的时候，将全选框改为勾中状态。

//增加一些和全选有关的友好操作。$('input.'+o.cls_item).click(function(){var x = $(this).attr('checked');if(x == true){$(a).attr('checked',true);}});

接下来是鼠标移动加深tr变色。

//mouseover变色table.find("tr").bind("mouseover",function(){$(this).css("background-color","#dedede");})table.find("tr").bind("mouseout",function(){$(this).css("background-color","#fff");})

接下来是隔行变色

//隔行变色table.find("tr:even").css("background-color","#999");

最后我建议啊，不要直接操作css，最好通过addclass这样来处理隔行变色。

基本上算是结束了，照例我会贴出所有的代码，可以自行改动。

js代码

(function($){jQuery.fn.tableSelectPlugin = function(options){var defaults = {id_all: "selAll",cls_item: "item",}var options = $.extend(defaults,options);return this.each(function(){var o = options;var table = $(this);var a = "#" + o.id_all;table.find(a).click(function(){var mk = $(a).attr('checked');if( mk == true ){$('input.'+o.cls_item).each(function(index){var temp = $(this).attr('checked');if(temp == false){$(this).attr('checked',true);}});}else{$('input.'+o.cls_item).each(function(index){var temp = $(this).attr('checked');if(temp == true){$(this).attr('checked',false);}});}});//增加一些和全选有关的友好操作。$('input.'+o.cls_item).click(function(){var x = $(this).attr('checked');if(x == true){$(a).attr('checked',true);}});//mouseover变色table.find("tr").bind("mouseover",function(){$(this).css("background-color","#dedede");})table.find("tr").bind("mouseout",function(){$(this).css("background-color","#fff");})//隔行变色//table.find("tr:even").css("background-color","#999");//不要用css，把他封装起来，作为类比较好。})}})(jQuery);

html代码。

<html><head><title>jQuery</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script><script src="jquery.tableSelectPlugin.js" type="text/javascript"></script></head><body><style>table { font-size:12px; border:1px solid #dedede; margin:0 auto; }table tr td { border: 1px solid #B1CDE3; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }table tr .title { text-align:left; }</style><table><tr><th><label><input id="allSel" type="checkbox" name="all"/>全选</label></th><th>名称</th><th>详情页</th><th>编辑宝贝</th><th>状态</th><th>预览</th><th>创建时间</th></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item" /></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item" /></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr><tr><td><input type="checkbox" value="" class="item"/></td><td>张三</td><td>http://www.csdn.net</td><td>编辑链接</td><td>已编辑</td><td>预览链接</td><td>1986-1-4</td></tr></table><script>$("table").tableSelectPlugin({id_all: "allSel",cls_item: "item",});</script></body></html>

结束了，这样的一个简单的tableUI jquery插件。

后续如果我有时间会贴出一个更好的版本。

（2014年3月19日22:06:05）