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

这一行

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

创建一个尚未在DOM中的新引用。

而是用这个替换它

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

现在，您将获得已经附加到DOM的同一行的句柄。

Answer 2

首先制作行的td，之后将整个tr附加到正文。

删除此行

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

Answer 3

使用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>`);
});

添加tr后，请使用ID代替获取行＆amp;附加td。

希望这会对你有所帮助。

Answer 4

将代码更改为此类

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

您忘了将tblRow追加到tblBody。添加最后一行将修复您的代码

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

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

5 个答案: