JavaScript操作表格进行拖拽排序

 

 

<js-dodo-table-

Drag and Drop JQuery plugin

>

以上插件可对table进行排序，拖动！

 

例如有下面一个样子的id为table的表格：

< table  id ="table"  cellspacing ="0"  cellpadding ="2" >
     < tr  id ="1" >< td > 1 </ td >< td > One </ td >< td > some text </ td ></ tr >
     < tr  id ="2" >< td > 2 </ td >< td > Two </ td >< td > some text </ td ></ tr >
     < tr  id ="3" >< td > 3 </ td >< td > Three </ td >< td > some text </ td ></ tr >
     < tr  id ="4" >< td > 4 </ td >< td > Four </ td >< td > some text </ td ></ tr >
     < tr  id ="5" >< td > 5 </ td >< td > Five </ td >< td > some text </ td ></ tr >
     < tr  id ="6" >< td > 6 </ td >< td > Six </ td >< td > some text </ td ></ tr >
</ table >

 

-使用此方法需先引入jquery.js文件

< script type = " text/javascript " >
$(document).ready( function () {
     //  Initialise the table
    $( " #table " ).tableDnD();
});
< / script>

 

-

如此，则能轻松对表格进行排序！

如果需要将排序完成后表格的row id输出排序后的数组，则使用如下方法：

$( ' #table ' ).tableDnD({
        onDrop:  function (table, row) {
            alert($.tableDnD.serialize());
        }
    });

 

而我在用这个的时候，并不是用的它的排序结果，而是自己手写了一个遍历表格后，取出每一行的id的代码片段。
这段小代码很简单，如下：

        $(document).ready( function () {

            $( " #table " ).tableDnD({
                 // 当拖动排序完成后
                onDrop:  function () {
                     // 获取id为table的元素
                     var  table  =  document.getElementById( " table " );
                     // 获取table元素所包含的tr元素集合
                     var  tr  =  table.getElementsByTagName( " tr " );
                     // 遍历所有的tr
                     for  ( var  i  =   0 ; i  <  tr.length; i ++ ) {
                         // 获取拖动排序结束后新表格中，row id的结果
                         var  rowid  =  tr[i].getAttribute( " id " );
                        alert(rowid);
                    }
                }
            });
            
        });

 

 

 

,zuihou 最后给出这个表格拖动排序的demo。

没有任何技术含量，别人写的插件，仅仅是插件应用的简单介绍而已。让您贱笑了。

 

JavaScript HTML

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > JavaScript表格拖动排序 </ title >
     < script  src ="js/jquery.js"  type ="text/javascript" ></ script >
     < script  src ="js/tablednd.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >

        $(document).ready( function () {

            $( " #table " ).tableDnD({
                 // 当拖动排序完成后
                onDrop:  function () {
                     // 获取id为table的元素
                     var  table  =  document.getElementById( " table " );
                     // 获取table元素所包含的tr元素集合
                     var  tr  =  table.getElementsByTagName( " tr " );
                     // 遍历所有的tr
                     for  ( var  i  =   0 ; i  <  tr.length; i ++ ) {
                         // 获取拖动排序结束后新表格中，row id的结果
                         var  rowid  =  tr[i].getAttribute( " id " );
                        alert( " 排序完成后表格的第  "   +  (i + 1 )  +   "  行id为 :  "   +  rowid);
                    }
                }
            });

        });

    
     </ script >
</ head >
< body >

用鼠标移动TR
< br />

< div  style =" margin:100px;" >

     < table  id ="table"  width ="600"  border ="0" >

             < tr  id ="row_1"   style ="width:600px; height:20px; background-color:Olive;" >
                 < td  style ="" > 1 </ td >
                 < td > parentElement </ td >
                 < td > moveRow 1 </ td >
                 < td > parentElement </ td >
             </ tr >
             < tr  id ="row_2"   style =" width:600px;height:20px; background-color:Green;" >
                 < td  style =" " > 2 </ td >
                 < td > parentElement </ td >
                 < td > moveRow 2 </ td >
                 < td > parentElement </ td >
             </ tr >
             < tr  id ="row_3"   style ="width:600px; height:20px; background-color:Gray;" >
                 < td  style =" " > 3 </ td >
                 < td > parentElement </ td >
                 < td > moveRow 3 </ td >
                 < td > parentElement </ td >
             </ tr >
             < tr  id ="row_4"   style =" width:600px; height:20px;background-color:Red;" >
                 < td  style =" " > 4 </ td >
                 < td > parentElement </ td >
                 < td > moveRow 4 </ td >
                 < td > parentElement </ td >
             </ tr >
             < tr  id ="row_5"   style ="width:600px;  height:20px;background-color:#ccc;" >
                 < td  style ="" > 5 </ td >
                 < td > parentElement </ td >
                 < td > moveRow 5 </ td >
                 < td > parentElement </ td >
             </ tr >

     </ table >
    
     </ div >
    
</ body >
</ html >