javascript - 使用 Jquery 将行附加到嵌套的 HTML 表

Question

我有一个嵌套的 Html 表，内表是隐藏的。当用户单击一行时，内行会用表格展开( Accordion )。行是动态生成的，包括使用 jquery 的内表行。问题是当我尝试将行附加到外部 html 表的 tbody 的最后一行时，在内表之后的外部表行也附加到内部表行。 请让我知道我哪里错了。

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:last').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:last').append(row);

  var nestedrow = "<tr><td colspan='4' class='hiddenRow'><div class='accordion-body collapse packageDetails1' id='accordion1'><table id='tempTable'><tbody>";
  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:last').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:last').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:last').append(row);
}

.hiddenRow {
  padding: 0 !important;
}

<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></tbody>
</table>

详情请看图片 Table View

Answer 1

你有这个的原因是 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>

和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()
});