Javascript 使用jQuery重新调整表列大小_Javascript_Jquery_Html Table

Javascript 使用jQuery重新调整表列大小

javascript jquery

Javascript 使用jQuery重新调整表列大小,javascript,jquery,html-table,Javascript,Jquery,Html Table,我正在尝试编写一段代码，以便为我的数据表启用列大小调整功能。但它无法正常工作。。我在网上浏览了几天，但除了一些插件外，什么也找不到。但我不想使用任何插件，因为我的数据表非常复杂，如果我使用它们，表的其他功能可能会被破坏。因此我尝试编写自己的插件。请检查并完善我的代码，或建议符合我规范的任何其他代码…… 注意：用户可以向右调整列的大小，直到表格宽度，但向左调整列的大小，直到td的左侧位置。 Eidt:Maxwell提供了一个很好的替代方案。它可以很好地工作，但有一种情况。如果我尝试向左调整大小，这

我正在尝试编写一段代码，以便为我的数据表启用列大小调整功能。但它无法正常工作。。我在网上浏览了几天，但除了一些插件外，什么也找不到。但我不想使用任何插件，因为我的数据表非常复杂，如果我使用它们，表的其他功能可能会被破坏。因此我尝试编写自己的插件。请检查并完善我的代码，或建议符合我规范的任何其他代码……
注意：用户可以向右调整列的大小，直到表格宽度，但向左调整列的大小，直到td的左侧位置。
Eidt:Maxwell提供了一个很好的替代方案。它可以很好地工作，但有一种情况。如果我尝试向左调整大小，这是不允许的，因为td宽度固定在其内容宽度上……但我想将其调整到左侧，直到其偏移量（）。通过将td的样式设置为溢出左值：隐藏或其他方式。。。。
这是我的一段代码

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


新文件
桌子{
边界塌陷：塌陷；
}
表td{
边框：1px纯红；
}
.vUiDtColResize{
宽度：2倍；
高度：20px；
边框：1px纯蓝色；
浮动：对；
显示：块；
光标：w-调整大小；
位置：相对位置；
右：-3px；
浮动：顶部；
}
美国号
名称
Qualif
拉马·拉姆，C.A
2美国科技公司
3.南卡罗来纳州
4Veera ReddyB.技术公司
$（'.vUiDtColResize'）。每个（函数（）{
var_rsTd=$（this）.parent（'td'）；
var _rsTr=_rsTd.parent（'tr'）；
变量(右),(左),(宽);；
$（this）.draggable（{axis:'x'，containment:_rsTd，refreshPositions:true，
创建：函数（事件、用户界面）{
},
开始：功能（事件、用户界面）{
_rsTdRight=_rsTd.offset（）.left+_rsTd.outerWidth（）；
},
拖动：函数（事件、ui）{
var\u sizeDiff=$（this）.offset（）.left-\u rsTdRight；
_rsTdRight=$（this）.offset（）.left；
_rsTdWidth=\u rsTd.outerWidth（）+\u sizeDiff；
_rsTd.外径（rsTdWidth）；
},
停止：功能（事件、用户界面）{
}
});
});

我将您的代码与我发现的一些技术进行了合并-

嗯，还有一些问题。首先，我想如果可以通过按每个TH来调整表头的大小，而不仅仅是小边框，那会更好（也更容易）

希望这能有所帮助。

在互联网上探索了几天后，我得到了一个很好的代码，我对它进行了修改，使它也满足了我的要求（当然，我的更改很少。它可能对其他人有用，所以我在这里发布…
风格


桌子{
表布局：固定；
边界塌陷：塌陷；
边框：1px纯黑；
}
tr.last td{
边框底部：1px纯黑；
}
运输署{
右边框：1px纯黑；
边框底部：1px纯黑；
位置：相对位置；
空白：nowrap；
填充物：2px 5px；
文本对齐：左对齐；
溢出：隐藏；
}
最后{
边界权：无；
}
thead td部门：第一个孩子{
文本溢出：省略号；
溢出：隐藏；
}
tbody td部门：第一个孩子{
溢出：隐藏；
}
.滚动容器{
溢出：自动；
宽度：700px；
高度：自动；
显示：内联块；
边框：1px纯红；
}
@-moz文档url-前缀（）{
.resizeHelper、.ui-Resizeable-e{
位置：相对位置；
浮动：对；
}
}

脚本


/**
*启用可调整大小的数据表列。
**/
（函数（$）{
$.widget（“ih.resizebalcolumns”{
_创建：函数（）{
这个。_initresizeable（）；
},
_initresizeable:function（）{
变量colElement、colWidth、originalSize；
var table=this.element；
this.element.find（“thead td”）.可调整大小({
句柄：{“e”：.resizeHelper}，
minWidth:2，//如果没有标签，则默认最小宽度
//设置正确的COL元素和原始大小
开始：功能（事件、用户界面）{
var colIndex=ui.helper.index（）+1；
colElement=table.find（“thead>tr>td.ui可调整大小：第n个子项（“+colIndex+”））；
colWidth=parseInt（colElement.get（0.style.width，10）；//比width快
originalSize=ui.size.width；
},                
//设置列宽度
调整大小：函数（事件、ui）{
var resizeDelta=ui.size.width-originalSize；
var newColWidth=colWidth+resizeDelta；
colElement.width（newColWidth）；
//必须设置高度，以防止IE9设置错误的高度
$（this.css（“高度”、“自动”）；
}
});
}
});
//初始化可调整大小
$（“#MyTable”）.ResizebleColumns（）；
})（jQuery）；

你的html应该是：*

<div class="scrollContainer">
    <table class="resizable" id="MyTable" width="100%">
         <thead>
            <tr>
                <td class="ui-resizable" style="width:100px;">
                <div>
                    <span >Column 1</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 2</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:300px;">
                <div>
                    <span >Column 3</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>

                <td class="ui-resizable" style="width:150px;">
                <div>
                    <span >Column 4</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 5</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable last" style="width:100px;">
                <div>
                    <span >Column 6</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>

            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>


第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第1列第2列
第3列第4列
第5列第6列
<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>
<script>
 /**
 * Enables resizable data table columns.
 **/

(function($) {
   $.widget("ih.resizableColumns", {
       _create: function() {
            this._initResizable();
        },

        _initResizable: function() {

            var colElement, colWidth, originalSize;
            var table = this.element;

            this.element.find("thead td").resizable({
                handles: {"e": ".resizeHelper"},
                minWidth: 2, // default min width in case there is no label
                // set correct COL element and original size
                start:function(event, ui) {
                    var colIndex = ui.helper.index() + 1;
                    colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
                    colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
                    originalSize = ui.size.width;
                },                

                // set COL width
                resize: function(event, ui) {
                    var resizeDelta = ui.size.width - originalSize;                    
                    var newColWidth = colWidth + resizeDelta;
                    colElement.width(newColWidth);

                    // height must be set in order to prevent IE9 to set wrong height
                    $(this).css("height", "auto");
                }
            });
        }

    });

    // init resizable
    $("#MyTable").resizableColumns();
})(jQuery);
</script>

<div class="scrollContainer">
    <table class="resizable" id="MyTable" width="100%">
         <thead>
            <tr>
                <td class="ui-resizable" style="width:100px;">
                <div>
                    <span >Column 1</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 2</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:300px;">
                <div>
                    <span >Column 3</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>

                <td class="ui-resizable" style="width:150px;">
                <div>
                    <span >Column 4</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable" style="width:200px;">
                <div>
                    <span >Column 5</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
                <td class="ui-resizable last" style="width:100px;">
                <div>
                    <span >Column 6</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
                </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>

            <tr class="last">
                <td><div>Column 1</div></td><td><div>Column 2</div></td>
                <td><div>Column 3</div></td><td><div>Column 4</div></td>
                <td><div>Column 5</div></td><td><div>Column 6</div></td>
            </tr>
        </tbody>
    </table>
</div>