JQurey 隔行变色,鼠标悬停/移开,CheckBox选中,页面排序

 

$(function() {
	
//	 jQuery.fn.alternateRowColors = function() {                      //做成插件的形式
//		  $("#sale tbody tr:odd").removeClass('even').addClass("odd");
//		  $("#sale tbody tr:even").removeClass('odd').addClass("even"); //隔行变色 偶数行
//          return this;
//      };
	Kin_Tables(false,0,1,false,false,false,false);
            $('table.ruler').each(function() {
                var $table = $(this);                       //将table存储为一个jquery对象
//                $table.alternateRowColors($table);          //在排序时隔行变色
             
                $('th', $table).each(function(column) {
                    var findSortKey;
                    if ($(this).is('.sort-alpha')) {       //按字母排序
                        findSortKey = function($cell) {
                            return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
                        };
                    } else if ($(this).is('.sort-numeric')) {       //按数字排序
                        findSortKey = function($cell) {
                            var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
                            return isNaN(key) ? 0 : key;
                        };
                    } else if ($(this).is('.sort-date')) {          //按日期排序
                        findSortKey = function($cell) {
                            return Date.parse('1 ' + $cell.text());
                        };
                    }

                    if (findSortKey) {
                        $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {
                            //反向排序状态声明
                            var newDirection = 1;
                            if ($(this).is('.sorted-asc')) {
                                newDirection = -1;
                            }
                            var rows = $table.find('tbody>tr').get(); //将数据行转换为数组
                            $.each(rows, function(index, row) {
                                row.sortKey = findSortKey($(row).children('td').eq(column));
                            });
                            rows.sort(function(a, b) {
                                if (a.sortKey < b.sortKey) return -newDirection;
                                if (a.sortKey > b.sortKey) return newDirection;
                                return 0;
                            });
                            $.each(rows, function(index, row) {
                                $table.children('tbody').append(row);
                                row.sortKey = null;
                            });

                            $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
                            var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
                            //实现反向排序
                            if (newDirection == 1) {
                                $sortHead.addClass('sorted-asc');
                            } else {
                                $sortHead.addClass('sorted-desc');
                            }
                           
                            //移除已排序的列的样式,添加样式到当前列
                            Kin_Tables(false,0,1,false,false,false,false);
                        });
                    }
                });
            });
        });
        

//样式的设置
function Kin_Tables(Kin_Table_GetTableMethod, //get your table
                        Kin_Table_Header_Offset, //set the table header offset
                        Kin_Table_Footer_Offset, //set the table footer offset
                        Kin_Table_Odd_Style, // set the table odd row style name (Default:odd)
                        Kin_Table_Even_Style, // set the table even row style name (Default:even)
                        Kin_Table_Hover_Style, // set the table mouseover row style name (Default:over)
                        Kin_Table_Click_Style // set the table odd row style name (Default:clicked)
    ){
	
        $(function(){
            var Kin_Table_Config = [];
            Kin_Table_Config.GetTableMethod = (Kin_Table_GetTableMethod ? Kin_Table_GetTableMethod : "#sale"); //得到Table的方法 同$() 必选
            Kin_Table_Config.Header_Offset = (!isNaN(Kin_Table_Header_Offset) ? Kin_Table_Header_Offset : 0); //从前起忽略多少行 可选参数
            Kin_Table_Config.Footer_Offset = (!isNaN(Kin_Table_Footer_Offset) ? Kin_Table_Footer_Offset : 0); //从后起忽略多少行 可选参数
            Kin_Table_Config.Odd_Style = (Kin_Table_Odd_Style ? Kin_Table_Odd_Style : "odd"); //奇数行样式 可选参数
            Kin_Table_Config.Even_Style = (Kin_Table_Even_Style ? Kin_Table_Even_Style : "even"); //偶数行样式 可选参数
            Kin_Table_Config.Hover_Style = (Kin_Table_Hover_Style ? Kin_Table_Hover_Style : "over"); //鼠标悬停样式 可选参数
            Kin_Table_Config.Click_Style = (Kin_Table_Click_Style ? Kin_Table_Click_Style : "over"); //鼠标点击样式 可选参数
//alert(Kin_Table_Config.Odd_Style);
//alert(Kin_Table_Config.Even_Style);
//alert(Kin_Table_Config.Hover_Style);
//alert(Kin_Table_Config.Click_Style);
//alert(Kin_Table_Config.GetTableMethod);
//            var Kin_Table = $(Kin_Table_Config.GetTableMethod+" tr:nth-child(n+"+eval(Kin_Table_Config.Header_Offset+1)+")"); //Old Method
            var Kin_Table = $(Kin_Table_Config.GetTableMethod + " tr").slice(Kin_Table_Config.Header_Offset,-Kin_Table_Config.Footer_Offset); //New Method

            Kin_Table.each(function(i, row){
                var Kin_Table_Row_Checkbox = $(row).find(":checkbox");
                var bChecked = false;
                //先移除所有的样式，在重新添加样式
               $(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Even_Style : Kin_Table_Config.Odd_Style);
               $(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
               $(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
                $(row).hover(function(){
                	$(this).addClass(Kin_Table_Config.Hover_Style);  //鼠标悬停给样式
                	$(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
                }, function(){
                	//在排序有会有样式错误，先删除所有的样式，在重新分配奇偶行的样式
                	$(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Even_Style : Kin_Table_Config.Odd_Style);
                    $(row).removeClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
                	$(this).removeClass(Kin_Table_Config.Hover_Style); //鼠标移开时给样式并重新分配奇偶行的样式
                    $(row).addClass(i % 2 == 0 ? Kin_Table_Config.Odd_Style : Kin_Table_Config.Even_Style);
                });
                $(row).click(function(){
                    $(this).toggleClass(Kin_Table_Config.Click_Style);
                    Kin_Table_Row_Checkbox.each(function(){
                        this.checked = $(row).hasClass(Kin_Table_Config.Click_Style);
                    });
                });
                Kin_Table_Row_Checkbox.each(function(){
                    if (this.checked) {
                        bChecked = true;
                        return false;
                    }
                });
                //复选框样式
                if (bChecked) {
                    $(row).addClass(Kin_Table_Config.Click_Style);
                    Kin_Table_Row_Checkbox.each(function(){
                        this.checked = true;
                    });
                }
                else {
                    $(row).removeClass(Kin_Table_Config.Click_Style);
                }
            });
        });
    }

注：给需要操作的表格id="sale"

 在进行页面排序的时候，要给<TH>标签加上class="sort-numeric"  根据数字排序，如需其他方式排序，看上面代码相应的值

务必给table加上<thead><tbody><tfooter>