zhouzhendong
/
baoshi-was


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
</head>
<body>
<div style="width: 80%;overflow-x: scroll;margin: 40px 0 0 30px;">
    <table id="table" cellspacing="0" cellpadding="2" width="100%" border="1">
        <thead>
        <tr align="center" bgcolor="#dcdcdc">
            <th style="width:100px;">用户编号</th>
            <th>试用时间</th>
            <th>转正时间</th>
            <th>生日时间</th>
            <th>民族</th>
            <th>身高</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2000001</td>
            <td>1997-3-13</td>
            <td>1997-3-13</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>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>2001-2-23</td>
            <td>汉</td>
            <td>171</td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
    var table = document.getElementById("table");
    var down = false;
    console.log(table.rows[0].cells)
    for (i = 0; i < table.rows[0].cells.length; i++) {
        table.rows[0].cells[i].onmousedown = function () {
            //记录单元格
            tTD = this;
            if (event.offsetX > tTD.offsetWidth - 10) {
                down = 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[i].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;
        }

    }


    document.onmouseup = function () {
        if (down) {
            //结束宽度调整
            if (tTD == undefined) tTD = this;
            down = false;
            tTD.style.cursor = 'default';
        }
    };

    document.onmousemove = function () {
        if (down) {
            //调整宽度
            if (down) {
                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;
                console.log(table)
                for (i = 0; i < table.rows.length; i++) {
                    table.rows[i].cells[tTD.cellIndex].width = tTD.width;
                }
                //调整整个表
                table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
                table.style.width = table.width;
            }
        }
    };
</script>
</body>
</html>