CODEWITHSUNDEEP
jqueryinternet-explorerinternet-explorer-7appendto
TTT
TTT

Reputation: 4432

.appendTo() does not work in IE7

I have updated my example

My case has two steps:

1) User will select the Number of modeled stages from a drop-down list. 2) Based on users input, I am using .appendTo method to create HTML tables on the fly.

Everything goes well on chrome, firefox, IE9 except IE7. A number of my users have IE7 and they are not allowed to update. So I have to fix this issue. Really appreciate any comments.

Another interesting thing is that I have used .appendTo() created another webpage, which works in IE7.

Here is an example of how it looks in Chrome and IE9

Below is my code:

HTML code:

<div class="articles">
<table align="center">
<tr><th><label for="id_S">Number of modeled stages:</label></th><td><select name="S" id="id_S">
<option value="">Please choose</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></td></tr>
</table></div>

JavaScript code:

$(".articles").find('table').addClass('table');

$('#id_S').change(function() {
    $('.leslie').remove();
    $('.no').remove();
    var total = $(this).val()
    $('<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr>').appendTo('.table');

    i = 0
    while (i < total) {
        $('<tr>').appendTo('.leslie')

        var j = 0
        while (j < total) {
            $('<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>').appendTo('.leslie tr:last')
            j = j + 1
        }

        $('</tr>').appendTo('.leslie')
        i = i + 1
    }
    $('</table>').appendTo('.leslie');


    $('<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr>').appendTo('.leslie');

    q = 0
    while (q < total) {
        $('<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>').appendTo('.no')
        q = q + 1
    }
    $('</table>').appendTo('.no');

})​

Upvotes: 1

Views: 1110

Answers (3)

jfriend00
jfriend00

Reputation: 708136

You can't append pieces of HTML like <table> and then separately </table>. You must append whole working pieces of HTML that make fully formed objects.

.append() and .appendTo() make whole DOM objects and then append those. They don't just append some HTML onto the end of innerHTML.

So, any HTML you pass .appendTo() must be a fully formed HTML object (e.g. an entire table or an entire row).

You can build up the HTML string yourself and then append that all at once:

var html = '<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr>';
html += '<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>';
html += '</table>';
$(html).appendTo(document.body);

OK, I've taken your HTML and code and rewritten the code to build proper HTML objects. I wasn't sure where you want the second table to be inserted since you were trying to append one table to another which isn't a legal structure. But, in any case, here's the fixed up code:

$('#id_S').change(function() {
    // remove previous tables
    $('.leslie').remove();
    $('.no').remove();

    // construct 2-D table that is total x total in size
    var total = $(this).val()
    var newTable = $('<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr></table>');

    var i = 0;
    while (i < total) {
        // create new row
        var newRow = $('<tr>').appendTo(newTable);

        var j = 0;
        while (j < total) {
            // create new cell and append it to the current row
            $('<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>').appendTo(newRow);
            j = j + 1;
        }
        // add this row to the table
        newRow.appendTo(newTable);
        i = i + 1;
    }
    // add the fully formed table to the document
    newTable.appendTo('.table');

    // create out second table
    newTable = $('<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr></table>');

    var q = 0;
    while (q < total) {
        // create a new row and add it to the new table
        $('<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>').appendTo(newTable);
        q = q + 1;
    }
    // add this fully formed table to the document
    newTable.appendTo(".table");

})​

And here's a working demo that works in IE7 too: http://jsfiddle.net/jfriend00/35ZNF/

Or, here's a simpler version that just constructs the HTML into a string and then appends the HTML all at once:

$('#id_S').change(function() {
    // remove previous tables
    $('.leslie').remove();
    $('.no').remove();
    var total = $(this).val()

    // construct 2-D table that is total x total in size
    var html = '<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr>';
    for (var i = 0; i < total; i++) {
        html += '<tr>';
        for (var j = 0; j < total; j++) {
            html += '<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>';
        }
        html += '</tr>';
    }
    html += "</table>";
    $(".table").append(html);

    // create our second table
    html = '<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr>';
    for (var q = 0; q < total; q++) {
        html += '<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>';
    }
    html += '</table>';
    $(".table").append(html);
})​

Working demo of this version: http://jsfiddle.net/jfriend00/qMnZV/

Upvotes: 7

Kevin B
Kevin B

Reputation: 95058

Only append whole html elements.

$('<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr></table>').appendTo('.table');         
$('<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>').appendTo('.leslie');

If you need to append an unknown number of rows, do it this way instead:

var strHTML = '<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr>';
// simulate a loop adding rows
for (var i = 0; i < 6; i++) {
    strHTML += '<tr><td><input type="text" size="5" name="a" value="0" id="id_a"/></td></tr>';
}

$($.parseHTML(strHTML)).appendTo(".table");

Upvotes: 1

voidvector
voidvector

Reputation: 1996

You are not using DOM/jQuery correctly. The DOM (or jQuery which is a DOM wrapper with a mix of other stuff) cannot manipulate open and close tags separately, it can only manipulate them together. If you pass partial HTML into jQuery, it will use the DOM API to construct a DOM object. In your case, the IE7 DOM cannot figure out what your partial HTML means.

The following should work: 

<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script> 
<script>
$('<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr></table>').appendTo('.table');         
$('<tr>').appendTo('.leslie');
$('<td><input type="text" size="5" name="a" value="0" id="id_a"/></td>').appendTo('.leslie tr:last');
</script>

The premise is that when you call $(...) with HTML, you should always pass in valid HTML.

Upvotes: 1

Related Questions