求高手帮忙更改表格多列头拖动宽问题

附源码:<!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="X-UA-Compatible" content="IE=7" />
    <script type="text/javascript" src="js/jQuery.js"></script>
    <title>new document </title>
    <style type="text/css">
        .inputdashed
{
    font-size: 12px;
    color: #000;
    background-color: #FFFFFF;
    border: 1px solid #f4f4f4;
    width: 100%;
    height: 100%;
}
.tdinputCls
{
    font-size: 12px;
    border: 0px #FFFFFF;
    background-color: #f4f4f4;
    width: 100%;
    height: 100%;
}
        .resizeDivClass
        {
            width: 1px;
            margin: 0px 0 0px 0;
            float: right;
            cursor: e-resize;
        }
        /*
*  锁定表头表格样式，仅适用于IE6/7/8
*
*/

        .fixbox
        {
            width: 1024px;
            height: 400px;
            overflow: auto;
            position: relative;
            z-index: 202;
        }
        .fixtable
        {
            z-index: 1001;
            position: relative;
            overflow: auto;
            border-collapse: collapse;
            width: 99.8%;
            margin: 0px auto;
            font-family: Tahoma, Arial, Helvetica, Sans-serif, "宋体";
            float: left;
        }

        .fixtable th
        {
            top: expression( this.parentElement.parentElement.parentElement.parentElement.scrollTop - 0);
            position: relative;
            z-index: 10;
            font-weight: bold;
            font-size: 12px;
            color: #15428B;
            background-image: url(../images/bg.gif);
            border-right: #99BBE8 1px solid;
            border-left: #99BBE8 1px solid;
            text-align: center;
        }
        .fixtable td
        {
            height: 17px;
            border-left: #99BBE8 1px solid;
            border-bottom: #99BBE8 1px solid;
        }


        th.lockcolumn
        {
            left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);
            z-index: 99;
        }
        td.lockcolumn
        {
            position: relative;
            left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft - 0);
        }

        .fullwidth
        {
            width: 100%;
        }

        .xscroll
        {
            overflow-x: hidden;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function MouseDownToResize(obj) {
            setTableLayoutToFixed(obj);
            obj.mouseDownX = event.clientX;
            obj.pareneTdW = obj.parentElement.offsetWidth;
            obj.pareneTableW = obj.parentNode.parentNode.parentNode.parentNode.offsetWidth;
            obj.setCapture();
        }
        function MouseMoveToResize(obj) {
            if (!obj.mouseDownX) return false;
            var newWidth = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;
            if (newWidth > 10) {
                var theObjTable = obj.parentNode.parentNode.parentNode.parentNode;
                obj.parentElement.style.width = newWidth;
                theObjTable.style.width = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;
            }
        }
        function MouseUpToResize(obj) {
            obj.releaseCapture();
            obj.mouseDownX = 0;
        }
        function setTableLayoutToFixed(obj) {
            var theObjTable = obj.parentNode.parentNode.parentNode.parentNode;
            if (theObjTable.style.tableLayout == 'fixed') return;
            var headerTr = theObjTable.rows[0];
            for (var i = 0; i < headerTr.cells.length; i++) {
                headerTr.cells[i].styleOffsetWidth = headerTr.cells[i].offsetWidth;
            }            for (var i = 0; i < headerTr.cells.length; i++) {
                headerTr.cells[i].style.width = headerTr.cells[i].styleOffsetWidth;
            }
            theObjTable.style.tableLayout = 'fixed';
        }
</script>
</head>
<body>
    <div class="fixbox" id="divBox" style="height: 129px; width: 1157px;">
        <table cellspacing="1" cellpadding="0" border="0" style="border-top: 1px solid rgb(153, 187, 232);
            width: 882px; height: 37px;" class="fixtable" id="tbtailorSizes">
            <tbody>
                <tr id="trtailorSizes" style="height: 13px;">
                    <th style="width: 35px; text-align: center;" id="Del" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>操作
                    </th>
                    <th style="display: none;" id="cId" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>员工ID
                    </th>
                    <th style="width: 35px; text-align: center; color: Blue;" id="cDepCode" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>编码
                    </th>
                    <th style="width: 80px; text-align: center; color: Blue;" id="cDepName" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>部门名称
                    </th>
                    <th style="width: 45px; text-align: center; color: Blue;" id="cCode" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>工号
                    </th>
                    <th style="width: 55px; text-align: center; color: Blue;" id="cName" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>姓名
                    </th>
                    <th style="width: 35px; text-align: center; color: Blue;" id="bSex" class="lockcolumn">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>性别
                    </th>
                    <th colspan="10" style="text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bdName">
                        <label style="display: none;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bspsId">
                            ba75ca36-1a2b-de71-7864-a03bf23af88b</label>
                        <span style="display: none;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bspdId">7083009d-b243-d5e9-af1a-143245333ef1</span>
                        <span style="display: none;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bspdName">女裙版型</span><span
                            style="display: none;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bspiName">R6038</span><span
                                style="display: none;"><ul id="ba75ca36-1a2b-de71-7864-a03bf23af88b">
                                    0</ul>
                            </span>女裙版型(R6038)
                    </th>
                </tr>
接一楼: <tr id="trtailorSizes1" style="height: 12px;">
                    <th id="Del1" class="lockcolumn">
                         
                    </th>
                    <th style="display: none;" id="cId1" class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th style="text-align: center; width: 100px; color: Red;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcinvcode_2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>货号
                    </th>
                    <th style="text-align: center; width: 40px; color: Blue;" id="ba75ca36-1a2b-de71-7864-a03bf23af88biquantity_2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>数量
                    </th>
                    <th style="text-align: center; width: 40px; color: Red;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcdfname_2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>规格
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine1">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>平腰围
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>缩腰围
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine3">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>裙长
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine4">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>裙围
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine5">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>xx
                    </th>
                    <th colspan="1" style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcDefine6">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>xx2
                    </th>
                    <th style="text-align: center; width: 120px" id="ba75ca36-1a2b-de71-7864-a03bf23af88bre_2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>备注
                    </th>
                </tr>
  <tr id="trtailorSizes2" style="height: 12px;">
                    <th id="Del2" class="lockcolumn">
                         
                    </th>
                    <th style="display: none;" id="cId2" class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th class="lockcolumn">
                         
                    </th>
                    <th style="text-align: center; width: 100px" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcinvcode">
                         
                    </th>
                    <th style="text-align: center; width: 40px" id="ba75ca36-1a2b-de71-7864-a03bf23af88biquantity">
                         
                    </th>
                    <th style="text-align: center; width: 40px" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcdfname">
                         
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine1">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine2">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine3">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine4">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine5">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="width: 42px; text-align: center;" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzDefine6">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span>净身
                    </th>
                    <th style="text-align: center; width: 120px" id="ba75ca36-1a2b-de71-7864-a03bf23af88bre">
                        <span class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);"
                            onmouseup="MouseUpToResize(this);"></span> 
                    </th>
                </tr>
接二楼：  <tr style="background-color: rgb(244, 244, 244);">
                    <td style="height: 17px;" class="lockcolumn">
                        <a disabled="disabled" href="#" class="Acls" id="btnDel-3">删行</a>
                    </td>
                    <td id="cId-3" style="display: none; color: rgb(0, 0, 0);" class="lockcolumn">
                        0ceffad8-5f13-4277-9cf9-a9c8e4ca50f4
                    </td>
                    <td id="cDepCode-3" style="height: 17px; color: rgb(0, 0, 0);" class="lockcolumn">
                        01
                    </td>
                    <td id="cDepName-3" style="height: 17px; color: rgb(0, 0, 0);" class="lockcolumn">
                        营业部
                    </td>
                    <td id="cCode-3" style="height: 17px; color: rgb(0, 0, 0);" class="lockcolumn">
                        27
                    </td>
                    <td id="cName-3" style="height: 17px; color: rgb(0, 0, 0);" class="lockcolumn">
                        麦同学
                    </td>
                    <td id="bSex-3" style="height: 17px; color: rgb(0, 0, 0);" class="lockcolumn">
                        女
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcinvcode-3"
                            style="border: 0px none rgb(241, 243, 245); color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="4" class="inputdashed" value="1" id="ba75ca36-1a2b-de71-7864-a03bf23af88biquantity-3"
                            style="color: rgb(0, 0, 0); border: 0px none rgb(241, 243, 245);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bcdfname-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" value="2" class="inputdashed" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine1-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" value="2" class="inputdashed" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine2-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine3-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine4-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine5-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td id="" style="height: 17px;">
                        <input type="text" maxlength="6" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bzdefine6-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                    <td style="height: 17px;" id="">
                        <input type="text" class="inputdashed" value="" id="ba75ca36-1a2b-de71-7864-a03bf23af88bre-3"
                            style="color: rgb(0, 0, 0);">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

调试易

求高手帮忙更改表格多列头拖动宽问题

解决方案 »