拖拉表格的JS

最新推荐文章于 2024-07-29 17:39:57 发布

fzzwake

最新推荐文章于 2024-07-29 17:39:57 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/fzzwake/article/details/3342806

版权

JS：

 
 /*
@parem      object      the tbody's object
@parem      object      tr's object (must be null)
@parem      string      the className of onmousedown
@parem      string      the className of onmouseout
*/
function order(tt,old,classover,classout) {
    var sf = arguments.callee; //get the function self 
    var trs = tt.getElementsByTagName('tr');
    for(var i=0;i<trs.length;i++) {
        trs[i].onmousedown = function () {
            if(this.style.cursor == 'move') {
                return false;
            }
            classout = this.className;
            this.className = classover;
            this.style.cursor = 'move';
            old = this;
        }
        trs[i].onmouseover = function () {
            if(this.style.cursor == 'move' || !old) {
                return false;
            }
            var tmp_old = old.cloneNode(true);
            var tmp_now = this.cloneNode(true);
            var p = this.parentNode;
            p.replaceChild(tmp_now,old);
            p.replaceChild(tmp_old,this);
            sf(tt,tmp_old,classover,classout);
        }
        trs[i].onmouseout = function () {
            //this.className = classout; 
        }
        trs[i].onmouseup = function () {
            this.className = classout;
            this.style.cursor = '';
            old = null;
        }
    }
}
 

示例：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="js/ajax.js"></script>
<script src="js/global.js"></script>
<style type="text/css">
.table {
    background-color:red;
}
.table td {
    background-color:#eeeeee;
}
.now td{
    background-color:red;
}
</style>
<script type="text/javascript">
<!--
window.onload = function () {
    order(document.getElementById('tt'),null,"now");
}
/*
@parem      object      the tbody's object
@parem      object      tr's object (must be null)
@parem      string      the className of onmousedown
@parem      string      the className of onmouseout
*/
function order(tt,old,classover,classout) {
    var sf = arguments.callee; //get the function self
    var trs = tt.getElementsByTagName('tr');
    for(var i=0;i<trs.length;i++) {
        trs[i].onmousedown = function () {
            if(this.style.cursor == 'move') {
                return false;
            }
            classout = this.className;
            this.className = classover;
            this.style.cursor = 'move';
            old = this;
        }
        trs[i].onmouseover = function () {
            if(this.style.cursor == 'move' || !old) {
                return false;
            }
            var tmp_old = old.cloneNode(true);
            var tmp_now = this.cloneNode(true);
            var p = this.parentNode;
            p.replaceChild(tmp_now,old);
            p.replaceChild(tmp_old,this);
            sf(tt,tmp_old,classover,classout);
        }
        trs[i].onmouseout = function () {
            //this.className = classout;
        }
        trs[i].onmouseup = function () {
            this.className = classout;
            this.style.cursor = '';
            old = null;
        }
    }
}
//-->
</script>
<body>
<table border="0" cellpadding="0" cellspacing="1" class="table">
    <tbody>
        <tr >
            <td>ID</td>
            <td>记录</td>
        </tr>
    </tbody>
    <tbody id="tt">
        <tr >
            <td>1</td>
            <td>记录</td>
        </tr>
        <tr>
            <td>2</td>
            <td>记录</td>
        </tr>
        <tr>
            <td>3</td>
            <td>记录</td>
        </tr>
        <tr>
            <td>4</td>
            <td>记录</td>
        </tr>
    </tbody>
</table>
</body>
</html>
 

fzzwake

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
拖拉表格的JS

JS：/*@parem object the tbodys object@parem object trs object (must be null)@parem string the className of onmousedown@parem string the className
复制链接

扫一扫