表格的自定义宽度(可拉伸)

最新推荐文章于 2024-04-29 11:06:38 发布

weixin_49035434

最新推荐文章于 2024-04-29 11:06:38 发布

阅读量181

点赞数

文章标签： html5 html css

原文链接：https://jingyan.baidu.com/article/6d704a1366ceab28db51ca9b.html

版权

主要解决表格的自定义宽度

高度同理

转载至https://jingyan.baidu.com/article/6d704a1366ceab28db51ca9b.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
</head>
 
<body>
    <table id="tb_3" cellspacing='0' cellpadding='2' border="1">
        <tr align="center" bgcolor="#dcdcdc">
            <td id="td1" style="width:100px">1</td>
            <td id="td2" >2</td>
            <td id="td3" >3</td>
            <td id="td4" >4</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
        </tr>
    </table>
    <script type="text/javascript">
       var tTD;
       var table = document.getElementById('tb_3')
       var td4 = document.getElementById('td4')
       document.getElementById('td4').style.width = localStorage.getItem('width')

       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.rows[0].cells[j].onmouseup = function() {
               //结束宽度调整
               if(tTD === undefined) tTD = this
               tTD.mouseDown = false
           }
           table.rows[0].cells[j].onmousemove = function() {
                //取出暂存的table cell
                if(tTD == undefined) tTD = this
                //调整宽度
                if(tTD.mouseDown != null && tTD.mouseDown == true){
                    if(tTD.oldWidth + (event.x - tTD.oldX) > 0)
                    tTD.width = tTD.oldWidth + (event.x - tTD.oldX)
                    document.getElementById('td4').style.width = td4.clientWidth+'px'
                    localStorage.setItem('width',td4.clientWidth+'px')
                }
           }
       }
    </script>
</body>
 
</html>

weixin_49035434

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的自定义宽度(可拉伸)

主要解决表格的自定义宽度高度同理转载至https://jingyan.baidu.com/article/6d704a1366ceab28db51ca9b.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>table</title></head> <body> <table id="tb_3"
复制链接

扫一扫