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"); 
                }
                
            }
           
	    }
  });

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

评论

1 楼 map521 2010-05-24  

这两天在整一个隔行换色的，但是用的js写的，感觉效果不太好。在这里发现了还有拖拽的功能的jquery呵呵谢谢了。