javascript - jQuery 将 td 附加到动态创建的 tr

Question

我有一个带有表格的 div，我想在一行中附加多个 td对它:

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>'
    )
});

不幸的是，创建的对象仍然是空的:

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

我找到了这个:https://stackoverflow.com/a/42040692/1092632但为什么以上对我不起作用？

Answer 1

首先制作td行的 s，之后追加整个 tr到 body 。

去掉这一行

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

因为您没有它的引用并使用 append循环后的部分代码。

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); // <-----------------------