如何使用jQuery调整表单元格的大小? [英] How to resize a table cell using jquery?

问题描述

我有一个2个单元格的表，我想使用jQuery用抓手使第一个可调整大小的

I have a 2 cells table and I wanna make the first resizable with a grab hand using jQuery

推荐答案

我还建议使用具有某些增强功能的jQuery UI Resizable.我可以使它以有效的HTML运行，从而在调整大小时更新表的COLGROUP区域.我在 http://上描述了完整的解决方案ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

I also recommend to use jQuery UI Resizable with some enhancements. I could make it running with valid HTML, updating the table's COLGROUP area on resize. I described the full solution at http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

简短的是:

1)HTML表在其COLGROUP区域中指定了初始宽度，并具有CSS属性table-layout:fixed. 2)用jQuery UI的.resizable()装饰TH元素. 3)调整大小开始时:找到活动TH的匹配COL元素，并记住原始宽度. 4)调整大小时:计算调整大小增量并更新(增加/减少)所选的COL元素.这将在每个浏览器中调整整个列的大小.

1) The HTML table specifies the initial width in its COLGROUP area and has CSS property table-layout:fixed. 2) Decorate TH elements with jQuery UI’s .resizable(). 3) On resizing start: Find the matching COL element of active TH and remember original width. 4) On resizing: Calculate the resize delta and update (increase/decrease) the selected COL element. This will resize the whole column with every browser.

$(".resizable th").resizable({
 handles: "e",

 // set correct COL element and original size
 start: function(event, ui) {
   var colIndex = ui.helper.index() + 1;
   colElement = table.find("colgroup > col:nth-child(" +
   colIndex + ")");

   // get col width (faster than .width() on IE)
   colWidth = parseInt(colElement.get(0).style.width, 10);
   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");
 }
});

这篇关于如何使用jQuery调整表单元格的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！