테이블 요소를 부트 스트랩 사업부로 대체하는 jQuery

Question

Twitter의 부트 스트랩에서 열을 쌓을 수 있도록 모든 테이블을 div로 바꾸려고합니다. 이런 식으로 사람들은 백엔드에서 Tinymce를 사용하여 테이블을 쉽게 만들 수 있지만 응답이 빠른 디자인을 깨지는 못합니다. Zurb 반응성 테이블은 절단하지 않습니다.

부트 스트랩 div는 12 개의 열 (span5, span7 등)의 총 너비를 기반으로하므로 테이블에 더 많거나 적은 열이있을 때마다 div 클래스를 변경해야합니다. 나는 테이블의 열 개수를 계산할 수있는 JS가 필요하다고 생각하고 내용을 재정렬하는 동안 해당 클래스의 div로 바꿉니다. 예를 들어, 2 열 테이블의 경우 클래스는 "span6"이됩니다. 4 열 테이블의 경우 "span3"이됩니다. 테이블 태그가 "row"클래스의 div로 바뀝니다

이것은 JS 지식을 넘어서는 방법입니다. 누구나 손을 빌려주거나 wysiwyg에서 쉬운 백엔드 편집을 허용하는보다 세련된 솔루션을 가질 수 있습니까?

Answer 1

이 작업을 수행 할 수 있어야합니다.

var table = $('table'), 
    div = $('<div />'); 

$('td', table).each(function(){ 
    $('<div />').html($(this).html()).appendTo(div); 
}); 

table.after(div).remove(); 

그리고 데모 : http://jsfiddle.net/tkirda/7GM5w/

다음은 샘플 코드는