jquery中tablesorter隔行颜色变化以及对应表格拖拽技术

小蛋蛋

对于jquery，实现table的行排序功能非常的简单,一般来说，实现隔行显示也是非常容易的，

自己在jquery的tablesorter插件的基础上，实现了自动的表格隔行变色，另外，关于表格的行的拖拽技术，jquery也提供了相应的tableDnD()函数来进行相应，这样就给了我们很大的方便，但是在一下的情形中你就需要自己编码了，例如我希望我的表格在刚加载的时候就要隔行显示，同时允许表格的行进行拖拽，另外，在我将一行拖拽到目的地释放的时候，这个时候表格还是隔行显示的。

在jquery中，一般将一行拖拽到指定位置的时候，该行的颜色是扔然不变的，例如我的奇数行是红色，我的偶数行是蓝色背景，那当我把第一行拖到第二行的位置时，虽然他们两个都换了位置，但是他们两个也都还是以前的颜色，这样造成的效果就不好看了。

下面是我的实现思路：

要实现表格行排序，就需要jquery.tablesorter.js,打开该js文件，然后找到：function appendToTable(table,cache)函数，这个函数就是实现相应排序的，然后在该函数里面你找到下面的代码：
for (var i=0;i < totalRows; i++) {rows.push(r[n[i][checkCell]]);if(!table.config.appender) {var o = r[n[i][checkCell]];var l = o.length;for(var j=0; j < l; j++) {tableBody[0].appendChild(o[j]);}}}

找到以后,然后你就可以在这段代码的下面添加如下的代码：
$("tr:visible",table.tBodies[0])        .filter(':even')        .removeClass(table.config.widgetZebra.css[1]).addClass(table.config.widgetZebra.css[0])        .end().filter(':odd')        .removeClass(table.config.widgetZebra.css[0]).addClass(table.config.widgetZebra.css[1]);
这段代码就是给奇数行和偶数行分别加不同的颜色

然后这样就可以了。
还有关于tableDnD的表格拖拽
只要用下面的代码就可以了：
  $("table").tableDnD({         onDrop:function(table,row){          var rows = table.tBodies[0].rows;          //alert("rows length="+rows.length);          //  alert("Row dropped was "+row.id+". New order: ");            for(i=0;i<rows.length;i++){                if(i%2==0){                //  alert("even");                    //rows[i].style.className="even2";                    $(".tablesorter tbody tr:even").removeClass();                     $(".tablesorter tbody tr:even").addClass("even");                 }                else{                //alert("odd");                //rows[i].style.className="odd2";                $(".tablesorter tbody tr:odd").removeClass();                  $(".tablesorter tbody tr:odd").addClass("odd");                 }                            }               }  });

下面是我写的一个小程序，大家可以看看
应该是很好看懂得