Question

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

＆＃13;

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

＆＃13;

.hiddenRow {
  padding: 0 !important;
}

＆＃13;

<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>

＆＃13;

请参阅图片了解更多详情 Table View

Answer 1

您遇到此问题的原因是class FileOwners { public static function groupByOwners($files) { $keys = FileOwners::pullKeys($files); $final_arr = []; for ($i=0; $i < count($keys); $i++) { # code... $result = FileOwners::pullValues($files, $keys[$i]); $final_arr[$keys[$i]] = $result; } return $final_arr; } private static function pullKeys($array) { $keys = []; foreach ($array as $key => $value) { # code... $keys[] = $value; } return array_unique($keys); } private static function pullValues($array, $key) { $data = []; foreach ($array as $k => $value) { # code... if($value == $key) { $data[] = $k; } } return $data; } } $files = array ( "Input.txt" => "Randy", "Code.py" => "Stan", "Output.txt" => "Randy", "test.py" => "Stan" ); var_dump(FileOwners::groupByOwners($files));发现了错误的find('tbody:last')

以下是工作示例：

tbody

和js：

<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>

Answer 2

您可以在children

使用find代替$('#tblTest').children('tbody:last').append(row);

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

.hiddenRow {
  padding: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="1" 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>

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

2 个答案: