2012-12-12 4 views
2

간단한 jQuery 테이블 편집기가 있으며 변수에 전체 테이블을 저장할 수 있기를 원합니다. 나중에 테이블의 상태가 미니 CMS의 일종으로 저장됩니다.생성 된 HTML을 변수에 저장하십시오.

HTML을 사용해 보았지만 생성 된 요소에는 작동하지 않습니다.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 또한 .html()이 안전을 반환합니까, 아니면 innerHTML의 브라우저 차이로 인해 사용하지 않아야합니까?

$("#target").click(function() { 
    $('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>'); 
}); 

$("#myTable").on('click', '.remove', function(event) { 
    $(this).parent().parent().remove(); 
}); 

var table = $("#myTable").html(); 
$("button").click(function() { 
    $(".result").html(table); 
}); 
+0

http://jsfiddle.net/84ETb/ 당신이 자바 스크립트 변수에'#의 myTable'의 HTML 콘텐츠를 저장할 의미합니까? 귀하의 질문은 명확하지 않습니다. – BenM

+0

동적으로 생성 된 요소의 경우 대신 'on'을 사용해야합니다. –

+1

가능한 복제본 http://stackoverflow.com/questions/13844202/trying-to-add-and-remove-table-rows-with-jquery –

답변

9

는에 클릭 처리기를 업데이트하십시오 (버튼을 클릭 할 때 즉, DOM을가 준비하지 않을 경우) 수정 작업을 완료 한 후 방금 html()를 호출 할 수 없습니다 다음

$("button").click(function() { 
    var table = $("#myTable").html(); 
    $(".result").html(table); 
}); 

여기에 작업을 참조하십시오 http://jsbin.com/ucopun/11

1

당신이

var the_content = $('#myTable').html(); 
+0

그랬지,하지만 이건 생성 된 HTML을 얻지 못한다. 내 피들을 보라. http://jsbin.com/ucopun/9/ – user1721135

+0

@ user1721135 부모에게 범프를 걸어 부모로부터 HTML을 가져와야 할 것이다. $ ('# myTable'). parent() .html(); –

+1

버튼을 클릭 할 때'.html()'을 호출하는 것이 아니라 문서가로드 될 때 호출합니다. 버튼 클릭으로 줄을 움직이면 원하는대로 작동합니다. http://jsbin.com/ucopun/10/ – BenM

2

전체 테이블을 다른 요소 또는 변수에 저장 하시겠습니까?

당신이

$('button').on('click', function(){ 
    var table_html = '<table id="myTable">' + $('#myTable').html() + '</table>'; 
    // alert(table_html); 
}); 

바이올린 다음 변수에 저장하는 경우 -

관련 문제