Question

我正在尝试编写一段代码，使列重新调整功能到我的数据表。但它不能正常工作..我在互联网上探索了几天但除了一些插件我什么都找不到。但我不想使用任何插件，因为我的数据表非常复杂，如果我使用它们，表的其他功能可能会被破坏。因此我尝试编写自己的。您可以检查并优化我的代码或建议任何其他符合我的规范的代码.... 注意：用户可以重新调整列的大小，直到表格宽度，但是拖曳离开，只能向上到td的左侧位置。
Eidt：麦克斯韦给了一个很好的选择。它工作得很好，但在一个案例中。如果我尝试向左侧调整大小，它不允许，因为td宽度固定为它的内容宽度......但是我想通过将td的样式置于溢出：隐藏或其他方式将其重新调整到左侧，直到它的 offset（）。left 值。这是我的一段代码......

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

Answer 1

我将您的代码与我找到的一些技术合并 - http://jsfiddle.net/tpqn7/

恕我直言，还有一些问题。首先，我认为如果可以通过按下每个TH来重新调整表格标题（不仅是小边框），那将会更好（也更容易）。

希望这有帮助。

Answer 2

在互联网上探索了几天后，我得到了一个很好的代码，我修改了它以使其满足我的要求（当然，我的改变有点小。它可能对其他人有用，所以我在这里发帖...
的式

表列使用jQuery重新调整大小

2 个答案: