<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 >
< 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>
$(document).ready( function () {
// Initialise the table
$( " #table " ).tableDnD();
});
< / script>
-
如此,则能轻松对表格进行排序!
如果需要将排序完成后表格的row id输出排序后的数组,则使用如下方法:
$(
'
#table
'
).tableDnD({
onDrop: function (table, row) {
alert($.tableDnD.serialize());
}
});
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 >
< 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 >