列のサイズ変更機能をデータ テーブルに有効にするコードを書き込もうとしていますが、正しく動作しません。数日間インターネットを調べましたが、いくつかのプラグイン以外は何も見つかりませんでした。しかし、私のデータ テーブルは非常に複雑で、プラグインを使用するとテーブルの他の機能が破壊される可能性があるため、プラグインは使用したくありません。私のコードをチェックして改良するか、私の仕様を満たす他のコードを提案してください..
注：ユーザーは、列のサイズをテーブル幅まで右に変更できますが、左に向けて、td の左位置までのみ変更できます..
Eidt:マクスウェルは素晴らしい代替手段を提供しました..うまく動作しますが、あるケースでは.左側に向かってサイズを変更しようとすると、td幅がコンテンツの幅に固定されているため許可されません...しかし、左にサイズ変更したいtdのスタイルをoverflow:hiddenまたはその他の方法に配置することにより
、そのoffset（）の左
の値になります....ここに私のコードがあります....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>