CODEWITHSUNDEEP
jqueryhtmlcode-generationinnerhtml
user1721135
user1721135

Reputation: 7092

Store generated HTML in variable

I have a simple jQuery table editor, and want to be able to store the whole table in a variable. Later the state of the table will be saved, sort of a mini CMS.

I tried using HTML, but it doesn't work for the generated elements.

What is the best way to to do this? Also, is what .html() returns safe, or should I not use it because of browser differences in 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);
});

Upvotes: 3

Views: 25966

Answers (3)

Atif
Atif

Reputation: 10880

Do you want to store the whole table in a different element or in a variable ?

If you want to store it in a variable then

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

Fiddle - http://jsfiddle.net/84ETb/

Upvotes: 2

FixMaker
FixMaker

Reputation: 3877

Try updating the click handler to the following:

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

See it working here: http://jsbin.com/ucopun/11

Upvotes: 10

BenM
BenM

Reputation: 53198

Can't you just call html() after you've done your modifications (i.e. when the button is clicked, not when the DOM is ready)

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

Upvotes: 1

Related Questions