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/ ]
  • 相关阅读:
    迷宫寻找路径数
    136. 只出现一次的数字
    48. 旋转图像
    283. 移动零
    面试题 01.06. 字符串压缩
    位运算符
    367. 有效的完全平方数
    868. 二进制间距
    SpringAOP表达式
    Mybatis常见错误及纠错
  • 原文地址:https://www.cnblogs.com/zjfree/p/2037298.html
Copyright © 2011-2022 走看看