首页 > 代码库 > table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度

2024-08-20 07:22:06   225人阅读

效果：可鼠标拖动td，动态修改它们的宽度

html：

<html>
    <head>
        <title>table拖动(兼容Firefox 3.5/IE6)，固定表格宽度</title>
        <meta content="charset=utf-8">
        <link rel="stylesheet" href="css/22.css" />
    </head>
    
    <body>
        <table class="bg" width="60%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable">
            <tr>
                <td class="num">序号</td>
                <td class="tit">
                    <span class="resizeDivClass" id="drag"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 公司名称
                </td>
                <td class="tit">
                    <span class="resizeDivClass" id="drag2"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 订单客户
                </td>
                <td class="tit">
                    <span class="resizeDivClass" id="drag3"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 部门
                </td>
                <td class="tit">
                    <span class="resizeDivClass" id="drag4"><img src="images/box1.gif" src="images/box1.gif" width="3" height="18"></span> 业务员
                </td>
                <td class="tit">
                    交款方式
                </td>
            </tr>
            <tr>
                <td class="num">1</td>
                <td>
                    <div style="white-space:nowrap;overflow:hidden;width:100%;">脚本脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家之家</div>
                </td>
                <td>
                    <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%">jb51.net</div>
                </td>
                <td>广告部</td>
                <td>王天一</td>
                <td>现金</td>
            </tr>
        </table>
    </body>
    
    <script type="text/javascript" src="js/22.js" ></script>
</html>

css：

.bg {
    font-size: 12px;
    color: #000000;
    table-layout: fixed; //这个属性可以隐藏文字 
}

.bg td {
    font-size: 12px;
    color: #000000;
    text-align: left;
    line-height: 15px;
    height: 20px;
}

.bg td.tit {
    background-color: #e2e2e2;
    color: #000;
    height: 17px;
    text-align: center;
    line-height: 15px;
}

.bg td.num {
    background-color: #e2e2e2;
    color: #000;
    text-align: right;
    line-height: 15px;
    height: 22px;
    width: 30px;
}

.resizeDivClass {
    text-align: right;
    width: 3px;
    margin: 0px 0 0px 0;
    background: #fff;
    border: 0px;
    float: right;
    cursor: e-resize;
}

js：

window.onload = function() {
            drag(document.getElementById(‘drag‘));
            drag(document.getElementById(‘drag2‘));
            drag(document.getElementById(‘drag3‘));
            drag(document.getElementById(‘drag4‘));
        };

        function drag(o, r) {
            o.p_p_c_gw = function(index) /*取得o.parentNode.parentNode.cells的宽度，兼容IE6和Firefox*/ {
                if(window.ActiveXObject) {
                    return o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth;
                } else {
                    return parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + index].offsetWidth) -
                        parseInt(o.parentNode.parentNode.parentNode.parentNode.cellPadding) * 2 - 2;
                }
            }
            o.p_p_p_sw = function(index, w) /*设置所有行的第index个单元格为w，在IE下可只设第一行*/ {
                for(var i = 0; i < o.parentNode.parentNode.parentNode.parentNode.rows.length; i++) {
                    o.parentNode.parentNode.parentNode.parentNode.rows[i].cells[index].style.width = w;
                }
            }
            o.firstChild.onmousedown = function() {
                return false;
            };
            o.onmousedown = function(a) {
                var d = document;
                if(!a) a = window.event;
                var lastX = a.clientX;
                var watch_dog = o.p_p_c_gw(0) + o.p_p_c_gw(1); //有时候拖拽过快表格会变大，至于为什么会这样我也不清楚。watch_dog是为了保证表格不会变大，
                if(o.setCapture)
                    o.setCapture();
                else if(window.captureEvents)
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                // 
                d.onmousemove = function(a) {
                    if(!a) a = window.event;
                    if(o.p_p_c_gw(0) + o.p_p_c_gw(1) > watch_dog) {
                        o.p_p_p_sw(o.parentNode.cellIndex + 1, watch_dog - o.p_p_c_gw(0));
                        return;
                    }
                    var t = a.clientX - lastX;
                    if(t > 0) { //right 
                        if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex + 1].style.width) - t < 10)
                            return;
                        o.p_p_p_sw(o.parentNode.cellIndex, o.p_p_c_gw(0) + t);
                        o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
                    } else { //left 
                        if(parseInt(o.parentNode.parentNode.cells[o.parentNode.cellIndex].style.width) + t < 10)
                            return;
                        o.p_p_p_sw(o.parentNode.cellIndex, o.p_p_c_gw(0) + t);
                        o.p_p_p_sw(o.parentNode.cellIndex + 1, o.p_p_c_gw(1) - t);
                    }
                    lastX = a.clientX;
                };
                d.onmouseup = function() {
                    if(o.releaseCapture)
                        o.releaseCapture();
                    else if(window.captureEvents)
                        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    d.onmousemove = null;
                    d.onmouseup = null;
                };
            };
        }

 

table拖动(兼容Firefox 3.5/IE6)，固定表格宽度


联系
我们