jquery를 사용하여 표 셀의 크기를 조정하는 방법은 무엇입니까?

Question

2 셀 테이블이 있고 jQuery를 사용하여 잡기 손으로 크기를 조절할 수 있습니다.

Answer 1

jQuery UI Resizable을 사용하는 것이 좋습니다. 유효한 HTML로 실행되도록 할 수 있으며 크기를 변경할 때 테이블의 COLGROUP 영역을 업데이트합니다.

1) HTML 표가 COLGROUP 영역의 초기 폭을 지정하고 CSS 속성 테이블 레이아웃이 있습니다 : 고정 나는 짧은 하나가 될 것 http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

에서 전체 솔루션을 설명했다. 2) TH 요소를 jQuery UI의 .resizable()으로 장식하십시오. 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"); 
} 
}); 

Answer 2

jQuery UI에는 페이지 크기를 조정할 수있는 요소를 만들 수있는 resizable plugin이 있습니다.

그러나 표 셀의 크기를 조정하는 것이 흥미로울 것이라고 생각할 수 있습니다. 특히 공간에서 공백을 공유 할 가능성이 높습니다. alsoResize 옵션을 살펴보십시오. 다른 셀을 축소하는 동안 다른 셀을 축소해야하며 그 반대의 경우도 마찬가지입니다.

또한 IE는 table 요소를 조작 할 때 악명이 높습니다. 따라서 YMMV.

Answer 3

나는 이것을 "바닐라"html 테이블로하는 방법을 모른다. 그러나 현재 내 페이지에 더 풍부한 데이터 테이블을 제공하기 위해 jqGrid jQuery 플러그인을 사용하고 있습니다. 여기에는 (다른 것들 중에서도) 열 너비의 클릭 및 드래그 크기 조정이 포함됩니다.