jQuery table表格列表拖動排序代碼



102 406 136



特效描述:jQuery table表格列表 拖動排序代碼,jQuery table表格列表拖動排序代碼

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd_0_5.js" ></script>

2. HTML代碼

<div style=" margin:100px;height: 500px;">
    <table id="table" width="700" border="0" cellspacing="1" cellpadding="0" style="background-color: #000000 ">
            <tr id="row_1">
                <td style="">1</td>
                <td>我是第一行第二列</td>
                <td>moveRow 1</td>
                <td>我是第一行第四列</td>
            </tr>
            <tr id="row_2">
                <td style=" ">2</td>
                <td>我是第二行第二列</td>
                <td>moveRow 2</td>
                <td>我是第二行第四列</td>
            </tr>
            <!--nodrag 不可以拖動 但是位置可以被占據
            	nodrop 位置不可以被占據  但是可以拖動
            -->
            <tr id="row_3" class="nodrag">
                <td style=" ">3</td>
                <td>特殊特殊---特殊特殊</td>
                <td>特殊特殊---特殊特殊</td>
                <td>特殊特殊---特殊特殊</td>
            </tr>
            <tr id="row_4">
                <td style=" ">4</td>
                <td>我是第四行第二列</td>
                <td>moveRow 4</td>
                <td>我是第四行第四列</td>
            </tr>
            <tr  id="row_5">
                <td style="">5</td>
                <td>這一行不可以拖動</td>
                <td>moveRow 5</td>
                <td>我是第五行第四列</td>
            </tr>
            <tr id="row_6">
                <td style=" ">6</td>
                <td>我是第四行第二列</td>
                <td>moveRow 6</td>
                <td>我是第四行第四列</td>
            </tr>
            <tr  id="row_7">
                <td style="">7</td>
                <td>這一行不可以拖動</td>
                <td>moveRow 7</td>
                <td>我是第五行第四列</td>
            </tr>
    </table>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#table").tableDnD({
			//滾動的速度
			scrollAmount:10,
			onDragClass:'highlight',
			//當拖動排序完成后
			onDrop: function(table,row) {
				//獲取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");
					//console.log("排序完成后表格的第 " + (i+1) + " 行id為 : " + rowid);
				}
				//console.log( $('#table').tableDnDSerialize());
			},
			onDragStart:function(table,row){
				//console.log(row.id);
			},
		});
	});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 拖動排序 拖拽排序 table表格 表格插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 淘宝买电子资料能赚钱 悬赏主怎么赚钱 刮刮乐的技巧 海南七星彩今天开奖 广东麻将中马计算方法 东北麻将规则公式 手机赢钱棋牌游戏排行 七星彩专家预测 17147胜负彩奖金多少 煎饼果子店赚钱吗 干代购怎样赚钱吗 中国体育彩票官网36 河北时时qq群是骗局 做银行客户经理赚钱吗 体彩顶呱刮金孔雀 25选7开奖结果查询