Adding html elements to dynamically added elements

Question

I want to add an inner table to table cell using JavaScript. The adding of next table data is not working and it looks the browser automatically closes the inner table . the next data cell is showing only when I removes the </table> of the inner table from the code but it is not properly arranged (Goes to next row). Can anybody help me with this one please.....

CODE:

$.each(result, function(i, data){
    $('#body').append(
        '<tr  id="#tr'+data['id']+'"><td>'+(i+1)+'</td>'+  //Adding new row
        '<td>'+data['code']+'</td>'+
        '<td>'+data['dscr']+
        '<div class="table-dscr">'+                        //Inserting inner table
        '<table id="'+data['id']+'">'+                              '<tr><th>Unit</th><th>Price</th><th>Qty</th></tr>');

    $.each(data, function(j, meta){                    //Inserting rows of inner table
        if (typeof meta['unit'] != 'undefined') {
            $('#'+data['id']).append('<tr>'+
                '<td>'+meta['unit']+'</td>'+
                '<td>'+meta['price']+'</td>'+
                '<td>'+meta['qty']+'</td>'+
                '</tr>Hello ');
        }                                   
    });

    $('#body').append(
        '</table></div></td>'+                         //Closing inner table
        '<td class="table-btn">'+                      //Adding next table data
        '<a href="additem.php?edit_id='+data['id']+'">Edit</a>'+
        '<a href="viewstock.php?delete_id='+data['id']+'">Delete</a>'+
        '</td></tr>');
});

I altered the code and added this part. But it is not affecting the table. the id is added dynamically..

$('#tr'+data['id']).append(
    '<td class="table-btn">'+
        '<a href="additem.php?edit_id='+data['id']+'">Edit</a>'+
        '<a href="viewstock.php?delete_id='+data['id']+'">Delete</a>'+
    '</td></tr>'
);

Can you gives some sample values for 'result' (input for $.each) ? to try.. — Ahamed Mustafa M
– Ahamed Mustafa M, Commented Dec 25, 2013 at 10:37
If you append an unbalanced HTML fragment, the browser will try to "fix" it to be valid HTML. Write your code with that in mind. — user1233508
– user1233508, Commented Dec 25, 2013 at 10:39
This is the smple json file [ { "id":"6", "code":"A4PCP", "dscr":"A4 Photocopy Paper", "0": { "unit":"Box", "price":"60", "qty":"0" }, "1": { "unit":"Ream", "price":"11", "qty":"0" } } ] — Jassim Abdul Latheef
– Jassim Abdul Latheef, Commented Dec 25, 2013 at 11:14

Sander_P · Accepted Answer · 2013-12-25 10:53:09Z

0

When you .append() a html string it will be parsed and become part of the dom, so your approach of appending chunks of one 'block' won't work.

If you create one string first and then .append() it it should work

answered Dec 25, 2013 at 10:53

Sander_P

1,8271 gold badge13 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding html elements to dynamically added elements

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related