如何使用jquery調整表格單元格的大小？

我有一個2單元格表，我想使用jQuery製作第一個可調整大小的抓取手如何使用jquery調整表格單元格的大小？

2010-08-10 Dewan159

我也推薦使用jQuery UI Resizable進行一些增強。我可以讓它使用有效的HTML運行，更新調整大小的表的COLGROUP區域。我描述的http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

全部溶液中的短一個將是：

1）HTML表指定初始寬度在其COLGROUP區域，並且具有的CSS屬性表格的佈局：固定。 2）用jQuery UI的.resizable（）裝飾TH元素。 3）在調整大小開始：找到活動TH的匹配COL元素，並記住原來的寬度。 4）在調整大小：計算調整大小增量和更新（增加/減少）選定的COL元素。這將使用每個瀏覽器調整整個列的大小。

$(".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"); 
} 
});

來源

2012-08-06 08:20:01 Ingo

如果您在此處轉貼部分博客，而不是僅發佈該鏈接，則會更好。 – nhahtdh 2012-08-06 09:53:14

jQuery UI有一個resizable plugin，它可以讓您在頁面上調整大小。

但是，我可以想象調整表格單元格的大小會很有趣，尤其是因爲它們可能會共享連續的空間。看看alsoResize選項;您可能需要縮小另一個單元格，而另一個單元格可以縮放，反之亦然。

另外，當涉及到操縱table元素，所以YMMV的IE是臭名昭着的。

來源

2010-08-10 20:54:16 ajm

我不知道有什麼辦法做到這一點「香草」html表。不過，我目前使用jqGrid jQuery插件在我的頁面上提供更豐富的數據表。它包括（除其他外）單擊並拖動調整列寬的大小。

來源

2010-08-10 20:56:33 mikemanne

如何使用jquery調整表格單元格的大小？

回答

相關問題