博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

JS拖动表格行

Posted on 2011-05-05 10:13  PHP-张工  阅读(3921)  评论(4)  编辑  收藏  举报

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>无标题页</title>
</head>
<body>
    <table id="tb1" border="1" cellpadding="3">
    <tr>
    <th>移动</th>
    <th>数据</th>
    <th>数据</th>
    <th>数据</th>
    </tr>
    <tr>
    <td>*</td>
    <td>11111111111</td>
    <td>sdgergserhserhserh</td>
    <td>awegaw</td>
    </tr>
    <tr>
    <td>*</td>
    <td>222222222</td>
    <td>serherwwwwww</td>
    <td>fafafff</td>
    </tr>
    <tr>
    <td>*</td>
    <td>333333333</td>
    <td>qqqqqqqwewer</td>
    <td>yukyuk</td>
    </tr>
    </table>
    <script type="text/javascript">    
    var curTr = null;
    var tb1 = document.getElementById('tb1');
    var trs = tb1.getElementsByTagName('tr');
	tb1.onselectstart = function(){
		if(curTr){
			document.selection.empty(); return true;
		}
	};
    for(var i=1; i<trs.length; i++) {
		var tds = trs[i].getElementsByTagName('td');
		tds[0].style.cursor = 'move';
		tds[0].onmousedown = function(){
			curTr = this.parentNode;
			curTr.style.backgroundColor = '#eff';
		};
		tds[0].onmouseover = function() {
			if(curTr && curTr != this.parentNode) {
				this.parentNode.swapNode(curTr);
			}
		}
    }
    
    document.body.onmouseup = function(){
		if(curTr){
			curTr.style.backgroundColor = '';
			curTr = null;
		}
	};
    </script>
</body>
</html>

注：不兼容firefox，在IE和chrome下测试通过哦。

示例下载：https://files.cnblogs.com/zjfree/trMove.rar