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]);if(!table.config.appender) {var o = r];var l = o.length;for(var j=0; j < l; j++) {tableBody.appendChild(o);}}}
找到以后,然后你就可以在这段代码的下面添加如下的代码：
$("tr:visible",table.tBodies) .filter(':even') .removeClass(table.config.widgetZebra.css).addClass(table.config.widgetZebra.css) .end().filter(':odd') .removeClass(table.config.widgetZebra.css).addClass(table.config.widgetZebra.css);
这段代码就是给奇数行和偶数行分别加不同的颜色
然后这样就可以了。
还有关于tableDnD的表格拖拽
只要用下面的代码就可以了：
$("table").tableDnD({ onDrop:function(table,row){ var rows = table.tBodies.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.style.className="even2"; $(".tablesorter tbody tr:even").removeClass(); $(".tablesorter tbody tr:even").addClass("even"); } else{ //alert("odd"); //rows.style.className="odd2"; $(".tablesorter tbody tr:odd").removeClass(); $(".tablesorter tbody tr:odd").addClass("odd"); } } }});
下面是我写的一个小程序，大家可以看看
应该是很好看懂得
页:
[1]