在指定的 <tr> 之后添加行

Question

基本上我有一个表，用户可以添加行。根据行类型，它们的添加方式略有不同。标准行始终由 .append() 添加，但“指令”行应始终添加在创建或修改的最后一行之后。

//Lastrow is always a Jquery object of a table row that's present on the DOM.

//The variable is set/reset whenever a row is created or modified.

lastRow = $(row)

...

 //indexRow = lastRow, but passed as an argument. 

function addRow(rowType, indexRow){

  newRow="<tr><td>Test</td></tr>";  

  //Want to add the new row after the last created row, and it doesn't work.

  //However if lastRow is an existing row that's been modified, it does work.

  if(rowType =='instructionRow'){

      indexRow.after($(newRow));

      indexRow.get(0).scrollIntoView();

  }

  if(rowType=="normalRow"){

     $('tableId').append(newRow);

     lastRow = $(newRow);

  }

}

LastRow 设置位置的一些示例

//In the add row function itself, if the row is not an instruction row.

//Where newRow = HTML for a table row

//This does not work when you try addRow("instructionRow", lastAddedRow) after it

  if(rowType=="normalRow"){

     lastRow = $(newRow);

  }

//In a row that is updated.

//Where row is a row in the dom, in a .each() loop

//In this case, the addRow("instructionRow", lastRow) will work.

$('tableId tr').each(function (index, row){

    if(row.childNodes[1].innerText == 'whatever'){

        lastRow = $(row);                   

        row.childNodes[1].innerText = "New Value";

}

因此，我可以认为新创建的行在添加到 lastRow 时不是活动的 dom 元素，但不确定为什么或如何解决它。

编辑：小提琴： https://codepen.io/josh-dredge/pen/ZEppyXm? editors=1111

复制。

1. 按“添加普通行”。两三次。

2. 按“添加指令行”。什么都不会发生（这是注定的）

3. 按“更新普通行”。第一个正常行将更新。4 按“添加指令行”。现在将在更新的普通行之后添加指令行

4. 
   

Answer 1

由于您的变量newRow是字符串，因此当您这样做时：$('#tableId').append(newRow); lastRow&nbsp;=&nbsp;$(newRow);它不是相同的“newRow” - 第二行通过重新解析字符串创建一个新元素（尚未附加到 DOM）。相反，你可以这样做：lastRow&nbsp;=&nbsp;$(newRow); $('#tableId').append(lastRow);或者lastRow&nbsp;=&nbsp;$(newRow).appendTo('#tableId')两者都将设置lastRow为已附加且位于 DOM 中的行