狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開(kāi)發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[轉(zhuǎn)帖]table任意拖拽改變寬高示例代碼

liguoquan
2023年5月20日 16:2 本文熱度 1272
:table任意拖拽改變寬高示例代碼

table任意拖拽改變寬高示例代碼


html結(jié)構(gòu):


<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>table</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


    <style>

        table th{

            cursor:col-resize;

            background:rgb(204,215,255);

        }

    </style>

</head>

<body>

    <table id="tb1" cellspacing="0" cellpadding="2" width="100%" border="1">

        <tbody>

            <tr>

                <th>編號(hào)</th><th>名稱</th><th>英文名</th><th>上線時(shí)間</th><th>主要功能</th>

                <th>備注</th><th>網(wǎng)址</th><th>大小</th>

            </tr>

            <tr>

                <td>01</td><td>樂(lè)之者java</td><td>lzzjava</td><td>2017-08-06</td>

                <td>java相關(guān)的原創(chuàng)視頻與文章</td>

                <td>網(wǎng)站</td><td>http://www.roadjava.com/</td><td>-</td>

            </tr>

            <tr>

                <td>02</td><td>樂(lè)之者內(nèi)容管理系統(tǒng)</td><td>lzzcms</td><td>2017-08-06</td><td>cms類(lèi)軟件</td>

                <td>軟件</td><td>-</td><td>幾十兆吧</td>

            </tr>

            <tr>

                <td>01</td><td>樂(lè)之者java</td><td>lzzjava</td><td>2017-08-06</td>

                <td>java相關(guān)的原創(chuàng)視頻與文章</td>

                <td>網(wǎng)站</td><td>http://www.roadjava.com/</td><td>-</td>

            </tr>

            <tr>

                <td>02</td><td>樂(lè)之者內(nèi)容管理系統(tǒng)</td><td>lzzcms</td><td>2017-08-06</td><td>cms類(lèi)軟件</td>

                <td>軟件</td><td>-</td><td>幾十兆吧</td>

            </tr>

        </tbody>

    </table>

</body>

 

<script>

    //js實(shí)現(xiàn)改變寬度

    var resizeTd; 

    var table = document.getElementById("tb1");

    for (j = 0; j < table.rows[0].cells.length; j++) {

        table.rows[0].cells[j].onmousedown = function (e) {

            if (this.offsetWidth-e.offsetX< 10) {

                resizeTd = this;//保存下要操作的列

                resizeTd.initClientX = e.clientX;//保存下鼠標(biāo)按下時(shí)鼠標(biāo)相對(duì)該單元格x方向的偏移

                resizeTd.initWidth = resizeTd.offsetWidth;//保存下該單元格的寬度

            }

        };

        table.rows[0].cells[j].onmousemove = function () {//更改鼠標(biāo)樣式

            if (this.offsetWidth-event.offsetX<10){

                 this.style.cursor = 'col-resize';

            }else{

                this.style.cursor = 'default';

            }

        };

    }

    document.onmouseup = function () {//不需要寫(xiě)在上邊的for循環(huán)里面

           resizeTd = null;

    };

    document.onmousemove = function (evt) {

        if(resizeTd){    

            if(resizeTd.initWidth+(evt.clientX-resizeTd.initClientX)>0){

                resizeTd.width=resizeTd.initWidth+(evt.clientX-resizeTd.initClientX);

            }

        }

    };

    

    

    //jquery實(shí)現(xiàn)改變高度

    var resizeTr;

    $("tr").mousedown(function(e){//鼠標(biāo)按下時(shí)初始化當(dāng)前要操作的行

        if($(this).outerHeight()-e.offsetY<10){

            resizeTr=this;

            resizeTr.initClientY=e.clientY;

            resizeTr.initHeight=$(this).outerHeight();

        }

    });

    $(document).mouseup(function(){//鼠標(biāo)抬起時(shí)置空當(dāng)前操作的行

        resizeTr=null;

    });

    $("tr").mousemove(function(evt){ //鼠標(biāo)在接近行底部時(shí)改變形狀

        if($(this).outerHeight()-evt.offsetY<10){

            $(this).css("cursor","row-resize");

        }else{

            $(this).css("cursor","default");

        }

    });

    //如果鼠標(biāo)移動(dòng)事件綁定在tr上,當(dāng)移動(dòng)過(guò)快時(shí)會(huì)導(dǎo)致tr的高度變化跟不上鼠標(biāo)的移動(dòng)變化

    $(document).mousemove(function(evt){

        if(resizeTr){    

            if(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY)>0){

                $(resizeTr).outerHeight(resizeTr.initHeight+(evt.clientY-resizeTr.initClientY));

            }

        }

    });

</script>

</html>


該文章在 2023/5/20 16:02:57 編輯過(guò)
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved