CODEWITHSUNDEEP
javascriptjqueryhtml
Elmishtawy
Elmishtawy

Reputation: 5

JQuery: Editing a table on click a div

<table id="#cells">
    <script type="text/javascript">
        for(var j = 0; j < 2; j++) {
            document.write('<tr>');
            for(var i = 0; i < 9; i++){
                document.write('<td></td>');
            }
           document.write('</tr>');
        }
        $('#arrow').click(function(){
            $('#cells').empty();
            for(var k = 0; k < 2; k ++){
                $('#cells').append('<tr>');
                for(i = 0; i < 9; i++){
                    $('#cells').append('<td></td>');
                }
                $('#cells').append('</tr>');
            }
        });
    </script>
</table>

Okay.. I have the above code which works perfectly for the first 2 loops (a table appears with 2 rows and 9 columns)

but in the second 2 loops a table appears with one row and 18 columns..

I don't know how to fix this properly

Any idea would help.. thanks

Upvotes: 0

Views: 55

Answers (1)

S.M.S
S.M.S

Reputation: 26

You should insert <tr></tr> code together.

$('#arrow').click(function(){
    var str = '';
    $('#cells').empty();
    for(var k = 0; k < 4; k ++){
        str += '<tr>';
        for(i = 0; i < 9; i++){
            str += '<td></td>';
        }
        str += '</tr>';
    }
    $('#cells').append(str);
});

Upvotes: 1

Related Questions