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]);

最新效果如下：

这段代码就是给奇数行和偶数行分别加不同的颜色 ，然后这样就可以实现隔行变色了。

二．表格行拖拽

关于表格的行拖拽，JQuery也提供了相应的插件可以使用，我找到了一个命名为jquery.tableRowDrag的插件，只要用下面的代码就可以了

$("#TableId").tableDnD({       onDrop: function (table, row) {        /*得到要变动的部分          var tbody = table.tBodies[0];          var tbody = table.getElementsByTagName("tbody")[0];*/        /*得到要排序的行的集合        var rows = tbody.getElementsByTagName("tr");       */      var rows = table.tBodies[0].rows;      for (i = 0; i < rows.length; i++) {         if (i % 2 == 0) {           $("#tbodyId tr:even").removeClass();           $("# tbodyId tr:even").addClass("even");        }        else {          $("# tbodyId tr:odd").removeClass();          $("# tbodyId tr:odd").addClass("odd");        }     }   } });