자바 스크립트에서 병합 또는 분할 표 셀에 대한 완전한 예제가 있습니까?

Question

웹 프로젝트에서 작업 중입니다. 기능 중 하나는 html 테이블을 디자인하고 사용자가 셀을 분리하거나 병합 할 수 있도록 허용하는 것입니다 (프로젝트에 jQuery를 사용하고 있습니다). 누구든지 나를 도울 수 있습니까?

Answer 1

작은 클래스를 사용하여 문제의 테이블 속성을 유지 한 다음 필요에 따라 InnerHTML을 다시 작성합니다. td 요소의 colspan 속성을 조정하는 것이 간단하게 들리지만 열이나 행을 추가 할 수는 없습니다. 당신이 가진 열이나 행을 확장 할 수만 있습니다.

Answer 2

도움이 필요한지 잘 모르겠습니다. TD 요소에서 colspan 속성을 설정하거나 제거해야합니다.

Answer 3

TinyMCE 테이블 플러그인은 사용자가 필요로하는 것을 정확히 수행합니다. 혹시 모르실 지 모르지만 HTML 코드를 출력하는 모든 기능을 갖춘 html/text 편집기입니다.

그것은 오픈 소스와 당신이 그것을 좀 걸릴 수있어 :

http://www.tinymce.com/download/download.php

나는 같은 기능을 필요로 오전 거기에서 스크랩 할 수 있도록 기대하고 있었는데, 어쩌면 jQuery를 버전을 구현 , 불행히도 코드는 너무 복잡합니다.

다른 유사한 편집기가 있지만 내 지식으로는 셀을 결합하거나 분할하고, 행을 추가, 삭제 및 크기를 조정하는 동일한 기능을 제공하지 않습니다.

Answer 4

방금 ​​jquery 플러그인을 사용하여 표 셀을 병합하고 분할했습니다. 여기

링크입니다 : http://www.redips.net/javascript/table-td-merge-split/

Answer 5

내가 여러 셀을 분할하고,이 기본입니다 함께 다시 병합 아래 작성한하지만 나를 위해 충분히 잘 작동합니다.

자바 스크립트 ... 나는 셀 값을 구분하는 쉼표를 사용했습니다, 그리고 그것은 어디에 필요한 경우 별도의 셀에 데이터를 다시 분할하는 방법을 알고 :

function mergeCells(cells, separator) { 

    var data = []; 

    $.each(cells, function(i, item) { 
     data.push(item[0].innerHTML); 
    }); 

    var result = $('<td/>', { 
     'html': data.join(separator) 
    }); 

    return result; 
} 

function splitCell(cell, separator) { 

    var result = ""; 
    var data = (cell[0].innerHTML).split(separator); 
    $.each(data, function(i, item) { 
     result = result + "<td>{0}</td>".format(item); 
    }); 

    return result; 
} 

사용법 :

var merged = $('table').find('td:eq(1)'); 
var splitHtml = splitCell(merged, ", "); 



var cell1 = $('table').find('td:eq(1)'); 
var cell2 = $('table').find('td:eq(2)'); 
var merged = mergeCells({ 
    1: cell1, 
    2: cell2 
}, ", "); 
$(cell1).replaceWith(merged); 
$(cell2).remove();