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>
<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>
