Question

我的表格中有一个列的默认宽度值。我希望用户能够通过使用光标并拖动标题来更改列的宽度（就像在MS Excel中一样）。

我使用jQuery和Bootstrap。我该怎么做？

代码：

＆＃13;

table{
    border: 1px solid black;
}

th, td {
    border: 1px solid black;
}

＆＃13;

<table>
   <tr>
      <th>header 1</th>
      <th>header 2</th>
   </tr>
   <tr>
      <td>data </td>
      <td>data 2</td>
   </tr>
   <tr>
      <td>data asdfassdfasdf</td>
      <td>data 2</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2 sdf sdfsdf</td>
   </tr>    
</table>

＆＃13;

Answer 1

你的意思是它应该可以调整大小？

如果是，那么我可以建议你使用jquery UI，因为你已经使用了jquery。

https://jqueryui.com/resizable/

希望它会有所帮助：D

Answer 2

JSFIDDLE DEMO
我赶时间，所以我还没有完全测试过，所以这可能是一个开始我的想法是检查你是否在一个单元格内点击并检索元素和指针位置，然后一旦你重新按下按钮就可以计算指针的不同位置并添加（可以是正数或负数）这个单元格的差异宽度（如果负设置宽度为1px）主要的缺失逻辑是检查单元格边框，因为它有点困难，更好的方法应该是计算指针位置和边框之间的差异，然后将其添加到newW calc

var iniCellW,
iniPointerPos,
selectedCell,
isCell = false;

$('tr > td').on('mousedown', function (e) {
    //option a: check if the border is cliccked
    isCell = true;
    selectedCell = $(this);
    iniPointerPos = e.pageX.toFixed(0);
});


$(document).on('mouseup', function (e) {
    if (isCell) {
        isCell = false;
        var widthChange = e.pageX.toFixed(0) - iniPointerPos,
            cellW = parseInt(selectedCell.css('width').replace('px','')),
            newW = cellW + widthChange, //option b:add the difference border logic
            setW = (newW > 0) ? newW+'px' : 1+'px';
        selectedCell.css('width', setW);
    }
});

显然，经过良好测试的插件更好，但如果你想自己做这件事可能是一个重点开始

修改
这是半工作的一个有更多的选项，它有一些问题（在JSFidlle不起作用，我认为这是因为脚本检索左侧magin，你应该在某些点相关ta父级）< / p>

var iniCellW,
    iniAbsPointerPos,
    iniRelPointerPos=0,
    selectedCell,
    isCell = false,
    resizeOnPointerMove = true,
    onlyBorderClick=true,
    clickMaxError=10;

$('tr > td, tr > th').on('mousedown', function (e) {

    selectedCell = $(this),
    iniAbsPointerPos = e.pageX.toFixed(0),
    iniCellW = parseInt($(this).css('width').replace('px',''));

    var diffBorder=0,
        el = this;

    while(el && !isNaN(el.offsetLeft)){
        diffBorder += el.offsetLeft - ((el.srollLeft)?el.srollLeft:0) ;
        el=el.offsetParent;
    }

    while(diffBorder<iniAbsPointerPos){
        diffBorder+=iniCellW;
    };

    iniRelPointerPos = diffBorder - iniAbsPointerPos;

    if(onlyBorderClick && Math.abs(iniRelPointerPos) < clickMaxError)
        isCell = true;
    else if(!onlyBorderClick)
        isCell = true;

});

$(document).on('mouseup', function (e) {
    if (isCell) {
        isCell = false;
        var widthChange = e.pageX.toFixed(0) - iniAbsPointerPos,
            newW = iniCellW + widthChange - ((resizeOnPointerMove && widthChange!=0)? iniRelPointerPos:0),
            setW = (newW > 0) ? newW+'px' : 1+'px';
        selectedCell.css('width', setW);
    }
});

如何在动态方法中改变列的宽度

2 个答案: