jQuery表格可拖動行高度是一種很實用的功能,它可以使用戶自由地調整表格中每一行的高度,從而更好地展示表格內容。以下是如何使用jQuery來實現可拖動行高度的代碼:
// 給表格中每一行中的每個單元格添加可拖動的屬性 $("td").resizable({ handles: "s", minWidth: 50, minHeight: 20, alsoResize: ".row-header", stop: function(event, ui) { // 更新被調整單元格所在的行的高度 var height = ui.size.height; var index = $(this).parent().index(); $(".data tr:eq(" + index + ") td").height(height); } }); // 給表格中每一行的第一個單元格添加定位屬性,以便使行高隨著調整而同步變化 $(".data tr td:first-child").position({ my: "left top", at: "left top", of: ".row-header", using: function(position) { $(this).css({ top: position.top, left: position.left, height: $(".row-header").eq($(this).parent().index()).height() }); } });
在上述代碼中,我們使用了jQuery UI庫中的resizable方法來給每個單元格添加可拖動的屬性,并通過alsoResize選項來指定被調整單元格所在行的表頭單元格也需要隨著變化。另外,在調整單元格大小后,我們通過更新所在行的高度來使調整生效。同時,通過給每行的第一個單元格添加定位屬性,我們還實現了行高隨著調整而同步變化的效果。
上一篇jquery表格新增一行
下一篇div li p