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

            }

	    }
  });

下面是我寫的一個小程序，大家可以看看
應該是很好看懂得