table行tr选中上下移动JS-浏览器兼容

最新推荐文章于 2024-02-28 10:11:27 发布

码生剑气

最新推荐文章于 2024-02-28 10:11:27 发布

阅读量1k

点赞数

分类专栏： JS table-tr 文章标签： JS table

本文链接：https://blog.csdn.net/msu9527/article/details/79921739

版权

table-tr 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

移动前：

移动后：

<!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 onselectstart="return false">1</td>
    <td onselectstart="return false">11111111111</td>
    <td onselectstart="return false">sdgergserhserhserh</td>
    <td onselectstart="return false">awegaw</td>
    </tr>
    <tr>
    <td onselectstart="return false" name="id">2</td>
    <td onselectstart="return false">222222222</td>
    <td onselectstart="return false">serherwwwwww</td>
    <td onselectstart="return false">fafafff</td>
    </tr>
    <tr>
    <td onselectstart="return false" name="id">3</td>
    <td onselectstart="return false">333333333</td>
    <td onselectstart="return false">qqqqqqqwewer</td>
    <td onselectstart="return false">yukyuk</td>
    </tr>
    </table>
	<button οnclick="save()" id="save">保存</button>
    <script type="text/javascript">    
    var curTr = null;
    var tb1 = document.getElementById('tb1');
    var trs = tb1.getElementsByTagName('tr');
    tb1.onselectstart = function(){
        if(curTr){
			if(navigator.userAgent.indexOf("MSIE")<=0){  //判断是否是IE以外的浏览器
				window.getSelection().empty();
			}else{
				document.selection.empty();
			}
			return true;
        }
    };
    for(var i=1; i<trs.length; i++) {
        var tds = trs[i].getElementsByTagName('td');
        trs[i].style.cursor = 'move';
        trs[i].onmousedown = function(){
            curTr = this;
            curTr.style.backgroundColor = '#eff';
        };
        trs[i].onmouseover = function() {
            if(curTr && curTr != this) {
                //this.parentNode.swapNode(curTr);
				if(navigator.userAgent.indexOf("MSIE")<=0){  //判断是否是IE以外的浏览器
					swapNode(this,curTr);
				}else{
					this.swapNode(curTr);
				}
            }
        }
    }
     
    document.body.onmouseup = function(){
        if(curTr){
            curTr.style.backgroundColor = '';
            curTr = null;
        }
    };
	      //交换2个DOM节点
        function swapNode(node1,node2)
        {
          var parent = node1.parentNode;//父节点
          var t1 = node1.nextSibling;//两节点的相对位置
          var t2 = node2.nextSibling;
          
          //如果是插入到最后就用appendChild
          if(t1) parent.insertBefore(node2,t1);
          else parent.appendChild(node2);
          if(t2) parent.insertBefore(node1,t2);
          else parent.appendChild(node1);
        }

	function save(){
	    var tb1 = document.getElementById("tb1");
	    var ids = document.getElementsByName("id");
		console.log(ids);
		var td = tb1.getElementsByTagName("td");
		for (var i=0;i<ids.length;i++) {
			console.log(ids[i].innerText);
			//console.log(td[i].id);
			//alert(td[i].id);
		}
	}
    </script>
</body>
</html>