Javascript 使用Jquery将行追加到嵌套HTML表

我有一个嵌套的Html表格，里面的表格是隐藏的。当用户单击一行时，内行将与表展开（一致）。这些行是使用jquery动态生成的，包括具有内部表的行。问题是，当我尝试将行附加到外部html表的tbody的最后一行时，位于内部表之后的外部表行也会附加到内部表行。 请告诉我哪里错了

函数LoadTestTable（）{
var行=”；
行+=“1.1”；
行+=“1.2”；
行+=“1.3”；
行+=“1.4”；
行+=”；
$（'tblTest'）。查找（'tbody:last'）。追加（行）；
行=”；
行+=“2.1”；
行+=“2.2”；
行+=“2.3”；
行+=“2.4”；
行+=“”
$（'tblTest'）。查找（'tbody:last'）。追加（行）；
var nestedrow=“”；
nestedrow+=“内部测试1内部测试2内部测试3”；
nestedrow+=“N1 N2 N3”；
nestedrow+=“”；
$（'tblTest'）.find（'tbody:last'）.append（nestedrow）；
行=”；
行+=“3.1”；
行+=“3.2”；
行+=“3.3”；
行+=“3.4”；
行+=”；
$（'tblTest'）。查找（'tbody:last'）。追加（行）；
行=”；
行+=“4.1”；
行+=“4.2”；
行+=“4.3”；
行+=“4.4”；
行+=”；
$（'tblTest'）。查找（'tbody:last'）。追加（行）；
}

.hiddenRow{
填充：0！重要；
}

测试1
测试2
测试3
测试4

您可以只使用

子项

而不是

在这里查找
$（'#tblTest'）。子项（'tbody:last'）。追加（行）


函数LoadTestTable（）{
var行=”；
行+=“1.1”；
行+=“1.2”；
行+=“1.3”；
行+=“1.4”；
行+=”；
$（'#tblTest'）.children（'tbody:last'）.append（行）；
行=”；
行+=“2.1”；
行+=“2.2”；
行+=“2.3”；
行+=“2.4”；
行+=“”
$（'#tblTest'）.children（'tbody:last'）.append（行）；
var nestedrow=“”；
nestedrow+=“内部测试1内部测试2内部测试3”；
nestedrow+=“N1 N2 N3”；
nestedrow+=“”；
$（'tblTest'）.children（'tbody:last'）.append（nestedrow）；
行=”；
行+=“3.1”；
行+=“3.2”；
行+=“3.3”；
行+=“3.4”；
行+=”；
$（'#tblTest'）.children（'tbody:last'）.append（行）；
行=”；
行+=“4.1”；
行+=“4.2”；
行+=“4.3”；
行+=“4.4”；
行+=”；
$（'#tblTest'）.children（'tbody:last'）.append（行）；
}
LoadTestTable（）
.hiddenRow{
填充：0！重要；
}

测试1
测试2
测试3
测试4
您这样做的原因是
find（'tbody:last'）
找到了错误的
tbody

以下是工作示例：

<table id="tblTest" class="table-awb alternate table table-hover  table-striped table-condensed" style="width:100%">
  <thead>
    <tr style="font-family:Calibri;font-size:14px;background-color:#EFF1F1;font-weight:bold;height:25px">
      <td>Test 1</td>
      <td>Test 2</td>
      <td>Test 3</td>
      <td>Test 4</td>
    </tr>
  </thead>
  <tbody id="outer"></tbody>
</table>


测试1
测试2
测试3
测试4

和js：

 $(document).ready(function() {
      function LoadTestTable() {
      var row = "<tr>";
  row += "<td> 1.1 </td>";
  row += "<td> 1.2 </td>";
  row += "<td> 1.3 </td>";
  row += "<td> 1.4 </td>";
  row += "</tr>";
  $('#tblTest').find('tbody#outer').append(row);

  row = "<tr id='package1' class='accordion-toggle' data-toggle='collapse' data-parent='#OrderPackages' data-target='.packageDetails1'>";
  row += "<td> 2.1 </td>";
  row += "<td> 2.2 </td>";
  row += "<td> 2.3 </td>";
  row += "<td> 2.4 </td>";

  row += "</tr>"
  $('#tblTest').find('tbody#outer').append(row);

  var nestedrow = "<tr><td colspan='4' class='hiddenRow'><div class='accordion-body collapse packageDetails1' id='accordion1'><table id='tempTable'><tbody id='inner'>";
  nestedrow += "<tr><td> Inner Test1 </td><td> Inner Test2 </td><td> Inner Test3 </td></tr>";
  nestedrow += "<tr><td> N1 </td><td> N2 </td><td> N3 </td></tr>";
  nestedrow += "</tbody></table></div></td></tr>";
  $('#tblTest').find('tbody#outer').append(nestedrow);


  row = "<tr>";
  row += "<td> 3.1 </td>";
  row += "<td> 3.2 </td>";
  row += "<td> 3.3 </td>";
  row += "<td> 3.4 </td>";
  row += "</tr>";
  $('#tblTest').find('tbody#outer').append(row);

  row = "<tr>";
  row += "<td> 4.1 </td>";
  row += "<td> 4.2 </td>";
  row += "<td> 4.3 </td>";
  row += "<td> 4.4 </td>";
  row += "</tr>";
  $('#tblTest').find('tbody#outer').append(row);
}

LoadTestTable()
});

$（文档）.ready（函数（）{
函数LoadTestTable（）{
var行=”；
行+=“1.1”；
行+=“1.2”；
行+=“1.3”；
行+=“1.4”；
行+=”；
$（“#tblTest”）.find（'tbody#outer'）.append（行）；
行=”；
行+=“2.1”；
行+=“2.2”；
行+=“2.3”；
行+=“2.4”；
行+=“”
$（“#tblTest”）.find（'tbody#outer'）.append（行）；
var nestedrow=“”；
nestedrow+=“内部测试1内部测试2内部测试3”；
nestedrow+=“N1 N2 N3”；
nestedrow+=“”；
$（'tblTest'）.find（'tbody#outer'）.append（nestedrow）；
行=”；
行+=“3.1”；
行+=“3.2”；
行+=“3.3”；
行+=“3.4”；
行+=”；
$（“#tblTest”）.find（'tbody#outer'）.append（行）；
行=”；
行+=“4.1”；
行+=“4.2”；
行+=“4.3”；
行+=“4.4”；
行+=”；
$（“#tblTest”）.find（'tbody#outer'）.append（行）；
}
LoadTestTable（）
});