Как изменить ширину столбца в динамическом подходе

Question

У меня есть значение ширины по умолчанию для столбца в моей таблице. Я хочу, чтобы пользователь имел возможность изменять ширину столбца, используя его курсор и перетаскивая заголовок (как и в MS Excel).

Я использую jQuery и Bootstrap. Как это сделать?

Код:

table{ 
 
    border: 1px solid black; 
 
} 
 

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

<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>

Answer 1

Вы имеете в виду это должно быть изменяемыми?

Если это так, я могу предложить вам использовать пользовательский интерфейс jquery, поскольку вы используете уже jquery.

https://jqueryui.com/resizable/

надеюсь, что это поможет: D

Answer 2

JSFIDDLE DEMO
Я в спешке, так что я не в полной мере испытали его, так что это может быть началом.
Идея состоит в том, чтобы проверить, не нажимаете ли вы внутри ячейки и не извлекаете элемент и позицию указателя, а затем, когда вы переходите к кнопке, вы вычисляете другую позицию указателя и добавляете (оно может быть положительным или отрицательным), эта разница в ширина ячейки (если отрицательная ширина набора до 1px).
Основной недостающий логика проверить границы ячейки, потому что это немного трудно, тем лучше должен быть подход, чтобы вычислить разницу между положением указателя и границами, а затем добавить его в newW известково

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); 
    } 
}); 

Очевидно, хорошо проверенный плагин лучше, но если вы хотите сделать это самостоятельно, может быть, может быть точкой для начала

EDIT
Это полу-работает один с еще несколько вариантов, он имеет некоторые проблемы (В JSFidlle не работает, я думаю, что это связано с тем, ct сценарий возвращает левый магин, вы должны в какой-то момент связать t с родительским уровнем)

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); 
    } 
});