js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gbk">
    <title>table</title>
    <style>
        .ztable {
            table-layout: fixed;
            font-size: 12px;
            font-family: 微软雅黑;
            border-right: 1px solid #D4D4D4;
            border-bottom: 1px solid #D4D4D4;
        }

            .ztable th {
                background-color: #F0F0F0;
                height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                border-left: 1px solid #D4D4D4;
                border-top: 1px solid #D4D4D4;
            }

            .ztable td {
                border-left: 1px solid #D4D4D4;
                border-top: 1px solid #D4D4D4;
                height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
    </style>
</head>
<body>
    <table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">
        <tbody>
            <tr align="center">
                <th style="width: 100px;">用户编号</th>
                <th style="width: 100px;">试用时间</th>
                <th style="width: 100px;">转正时间</th>
                <th style="width: 100px;">性别</th>
                <th>姓名拼音</th>
                <th>生日时间</th>
                <th>民族</th>
                <th>身高</th>
            </tr>
            <tr>
                <td>2000001</td>
                <td>1997-3-13</td>
                <td>1997-3-13</td>
                <td>1</td>
                <td>WZJ</td>
                <td>1965-3-13</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000045</td>
                <td>2001-2-15</td>
                <td>2001-3-15</td>
                <td>0</td>
                <td>WY</td>
                <td>1978-8-5</td>
                <td>汉</td>
                <td>162</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
        var table = document.getElementById("tb_1");
        for (j = 0; j < table.rows[0].cells.length; j++) {
            table.rows[0].cells[j].onmousedown = function () {
                //记录单元格 
                tTD = this;
                if (event.offsetX > tTD.offsetWidth - 10) {
                    tTD.mouseDown = true;
                    tTD.oldX = event.x;
                    tTD.oldWidth = tTD.offsetWidth;
                }
                //记录Table宽度 
                //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement; 
                //tTD.tableWidth = table.offsetWidth; 
            };
            table.rows[0].cells[j].onmouseup = function () {
                //结束宽度调整 
                if (tTD == undefined) tTD = this;
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            };
            table.rows[0].cells[j].onmousemove = function () {
                //更改鼠标样式 
                if (event.offsetX > this.offsetWidth - 10)
                    this.style.cursor = 'col-resize';
                else
                    this.style.cursor = 'default';
                //取出暂存的Table Cell 
                if (tTD == undefined) tTD = this;
                //调整宽度 
                if (tTD.mouseDown != null && tTD.mouseDown == true) {
                    tTD.style.cursor = 'default';
                    if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    //调整列宽 
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                    //调整该列中的每个Cell 
                    table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
                    for (j = 0; j < table.rows.length; j++) {
                        table.rows[j].cells[tTD.cellIndex].width = tTD.width;
                    }
                    //调整整个表 
                    //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth); 
                    //table.style.width = table.width; 
                }
            };
        }
    </script>
</body>
</html>

 

posted @ 2014-11-14 14:25  为乐而来  阅读(2441)  评论(0)  编辑  收藏  举报