zoukankan      html  css  js  c++  java
  • JS拖动表格行 PHP

    代码

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


    欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
  • 相关阅读:
    第十次上机练习
    第七次作业
    第九次上机练习
    第八次上机练习
    第七次上机练习
    第六次作业
    第六次上机练习
    6.3
    5.28
    5.26
  • 原文地址:https://www.cnblogs.com/zjfree/p/2037298.html
Copyright © 2011-2022 走看看