當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript操作表格进行拖拽排序
生活随笔
收集整理的這篇文章主要介紹了
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輸出排序后的數組，則使用如下方法：
????????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>
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/didi/archive/2010/03/22/1691663.html
總結
以上是生活随笔為你收集整理的JavaScript操作表格进行拖拽排序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 递归算法教学设计java,递归算法数字游
- 下一篇： javascript 日期控件