jQuery append td to dynamically created tr

Question

I have a div with a table and I'd like to append a row with multiple td to it:

var $tblBody = $('#' + btn.attr('data-tbody-id')); //tbody of the Table

// Append the Row
$tblBody.append('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');
var $tblRow = $('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');

//Loop through my data and append tds
$.each(data.extra.fields, function (i, v) {
    console.log(i); //Shows 0,1,2,3 etc. 
    $tblRow.append('' +
         '<td class="' + v.cellClass + '">' +
         '   <span class="'+data.extra.span+'_'+v.name+'_'+data.extra.id+'">' + v.value + '</span>' +
         '</td>'
    )
});

Unfortunately the created to stays empty:

<tr id="row_ZWxoQXArUi82K3BjaFY4Y0x2ZWR3UT09_41_temp"></tr>

I found this: https://stackoverflow.com/a/42040692/1092632 but why is the above not working for me?

Answer 1

First make the td s of the row, after that append whole tr to the body.

Remove this line

$tblBody.append('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp">'); ,

because you don't have a reference on it and use append part of your code after the loop.

var $tblRow = $('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');

$.each(data.extra.fields, function (i, v) {
    console.log(i); //Shows 0,1,2,3 etc. 
    $tblRow.append('' +
         '<td class="' + v.cellClass + '">' +
         '   <span class="'+data.extra.span+'_'+v.name+'_'+data.extra.id+'">' + v.value + '</span>' +
         '</td>'
    )
});

$tblBody.append($tblRow); // <-----------------------

Answer 2

This line

var $tblRow = $('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');

creates a new reference which is not in DOM yet.

instead, replace it with this

var $tblRow = $tblBody.find( "#row_' + data.extra.span + '_' + data.extra.id + '_temp">');

This will now get you the handle to the same row which has already been appended to the DOM.

Answer 3

Here you with one more solution using ES6 template literals

var $tblBody = $('#' + btn.attr('data-tbody-id')); //tbody of the Table

// Append the Row
var rowid = 'row_' + data.extra.span + '_' + data.extra.id + '_temp';
$tblBody.append(`<tr id=${rowid} />`);

//Loop through my data and append tds
$.each(data.extra.fields, function (i, v) {
  console.log(i); //Shows 0,1,2,3 etc. 
  $(`#${rowid}`).append(
     `<td class="${v.cellClass}">
       <span class="${data.extra.span}_${v.name}_${data.extra.id}">
         ${v.value}
       </span>
     </td>`);
});

Once you appended the tr then use the id instead of get the row & appending the td .

Hope this will help you.

Answer 4

change the code to something like this

var $tblBody = $('#' + btn.attr('data-tbody-id')); //tbody of the Table

// Append the Row
$tblBody.append('<tr id="row_'+data.extra.span+'_'+data.extra.id+'_temp"></tr>');
var $tblRow = $('#'+'row_'+data.extra.span+'_'+data.extra.id+'_temp');

//Loop through my data and append tds
$.each(data.extra.fields, function (i, v) {
    console.log(i); //Shows 0,1,2,3 etc. 
    $tblRow.append('' +
         '<td class="' + v.cellClass + '">' +
         '   <span class="'+data.extra.span+'_'+v.name+'_'+data.extra.id+'">' + v.value + '</span>' +
         '</td>'
    )
});

Answer 5

You forgot to append tblRow to the tblBody . Adding the last line would fix your code

// Append the Row
$tblBody.append('<tr 
id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');
var $tblRow = $('<tr 
id="row_'+data.extra.span+'_'+data.extra.id+'_temp">');

//Loop through my data and append tds
$.each(data.extra.fields, function (i, v) {
    console.log(i); //Shows 0,1,2,3 etc. 
    $tblRow.append('' +
         '<td class="' + v.cellClass + '">' +
         '   <span 
class="'+data.extra.span+'_'+v.name+'_'+data.extra.id+'">' + v.value + 
'</span>' +
     '</td>'
    )
});

$tblBody.append($tblRow);