m0_62600920 2024-08-12 10:05 采纳率: 1.1%
浏览 1

设置单元格的最小宽度值

我创建一个表格图1，我想要设置鼠标按住摘要和科目中间的边框来回拖动调节这两个单元格的大小，当拖到摘要单元格小于120px就停止，我也在摘要单元格设置了最小宽度值，但是不管用图2，希望学长指点一下

img

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
    <style>
        .divtab {
          width: 900px; 
          margin-left: 80px;
          margin-top: 80px;          
        }
        table{
            width: 100%;
            table-layout: fixed;
            overflow: hidden;            
            white-space:nowrap; 
            text-overflow: ellipsis;
        }
        .xhtd{
            width: 80px;
            height: 68px;
        }
        .zytd{
            height: 38px;
            min-width: 130px;
        }
        .kmtd{
            height: 38px;
            min-width: 130px;
        }
        .jdtd{
            width: 208px;
        }
        .style1{
            height: 60px;
        }
       
    </style>
</head>
<body>
    <div class="divtab">
        <table id="tb_1" cellspacing="0" width="100%" border="1" >
            <tbody>
                <tr>
                    <td class="xhtd" rowspan="2">序号</td>
                    <td class="zytd" rowspan="2">摘要</td>
                    <td class="kmtd" rowspan="2">科目</td>
                    <td class="jdtd wd4">借方金额</td>
                    <td class="jdtd wd5">贷方金额</td>
                </tr>
                <tr>
                    <td class="style">123</td>
                    <td class="style">456</td>
                </tr>
                <tr>
                    <td class="style1" wd></td>
                    <td class="style1"></td>
                    <td class="style1"></td>
                    <td class="style1" wd4></td>
                    <td class="style1" wd5></td>
                </tr>
                <tr>
                    <td class="style1" wd></td>
                    <td class="style1"></td>
                    <td class="style1"></td>
                    <td class="style1" wd4></td>
                    <td class="style1" wd5></td>
                </tr>
            </tbody>
        </table>
    </div>   
    <script type="text/javascript"> 
        function dragclle(){           
            var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
            var table = document.getElementById("tb_1"); 
            // for (j = 1; j < table.rows[0].cells.length - 3; j++) {
            //     table.rows[0].cells[j].onmousedown = function () {
            rows= table.getElementsByTagName('tr') 
            console.log(rows);                                
            for (i = 0; i < 1; i++) {
                for (j = 1; j < rows[i].cells.length - 3; j++) {                     
                    rows[i].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; 
                    }; 
                    rows[i].cells[j].onmouseup = function () { 
                    //结束宽度调整 
                        if (tTD == undefined) tTD = this; 
                        tTD.mouseDown = false; 
                        tTD.style.cursor = 'default'; 
                    }; 
                    rows[i].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; 
                        }
                    }; 
                }
            }
        }
        dragclle()
    </script> 
        
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 檀越@新空间 2024-08-12 10:06
    关注

    上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    你的问题描述不太清楚，你可以按照以下步骤来解决这个问题：

    首先，我们需要获取需要拖动的表格单元格的ondragstart事件，并在这些事件中找到被拖动的单元格。

    然后，我们需要监听拖动事件，并改变这个单元格的CSS样式以适应拖动的效果。

    下面是具体的实现代码：

    // 获取拖动单元格的元素
var tTD = document.getElementById('tb_1').getElementsByTagName('td')[0];

// 设置初始宽度为table宽度的一半
var tableWidth = tTD.offsetWidth;

// 遍历所有td元素，找到被拖动的单元格
for (var i = 0; i < tTD.cells.length; i++) {

    // 在拖动开始时，记录该单元格
    tTD.addEventListener('dragstart', function() {
        tTD.oldX = event.clientX;
        tTD.oldWidth = tableWidth / 2;
    });

    // 当鼠标移动时，更新该单元格的宽度
    tTD.addEventListener('mousemove', function(event) {
        tTD.offsetWidth = event.clientX - tTD.oldX + 10;
        if (tTD.offsetWidth > tableWidth / 2) {
            tTD.classList.add('long');
        } else {
            tTD.classList.remove('long');
        }

        // 更新该单元格的cursor样式，使其与拖动的方向一致
        tTD.addEventListener('mouseup', function() {
            tTD.textContent = '';
            tTD owl = tTD.querySelector('.owl');
            owl.classList.remove('owl');

            // 标记被拖动的单元格为已拖动
            tTD.addEventListener('mouseover', function() {
                tTD.classList.add('hover');
            });
            tTD.addEventListener('mouseout', function() {
                tTD.classList.remove('hover');
            });
        });
    });
}

// 调整宽度样式
tTD.style.width = tableWidth + 'px';

// 给选中的单元格添加新的样式
for (var i = 0; i < tTD.cells.length; i++) {
    tTD.classList.add('long');
}

    注意：这段代码假设拖动是通过鼠标左键点击单元格触发的。如果需要更复杂的拖动功能（例如拖拽整个行或列），可能需要使用不同的方法。此外，如果你的HTML结构和上面的代码不完全匹配，可能还需要相应地调整代码。

    评论

报告相同问题？

问题事件

  • 创建了问题 8月12日