js 可拉伸表格

時間 2019-11-25

原文原文鏈接

tablejavascript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table</title>
</head>

<body>
    <table id="tb_3" cellspacing="0" cellpadding="2" width="100%" border="1">
        <tbody>
            <tr align="center" bgcolor="#dcdcdc">
                <td style="width:100px;">用戶編號</td>
                <td>試用時間</td>
                <td>轉正時間</td>
                <td>性別</td>
                <td>姓名拼音</td>
                <td>生日時間</td>
                <td>民族</td>
                <td>身高</td>
            </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>200004</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_3");
        console.log(table.rows[0].cells)
        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>

用戶編號	試用時間	轉正時間	性別	姓名拼音	生日時間	民族	身高
2000001	1997-3-13	1997-3-13	1	WZJ	1965-3-13	漢	171
2000045	2001-2-15	2001-3-15	0	WY	1978-8-5	漢	162
200004	2001-2-23	2001-3-23	0	LQ	2001-2-23	漢	171

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。