JEditableTable嵌套子表格

JEditableTable是一款jQuery插件，可实现可编辑的表格。要嵌套子表格，可以使用以下步骤：

1. 为主表格添加一个列，用于触发展开子表格的事件。例如，可以在每一行的最后一列添加一个“+”按钮。
2. 在子表格中添加与主表格中的行数据相关的数据。
3. 使用jQuery的事件委托机制，在主表格中绑定点击事件来展开或关闭子表格。
4. 使用jQuery的ajax方法，从服务器获取子表格数据，并将其添加到相应的主表格行中。

以下是一个示例代码：

HTML：

<table id="mainTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td><button class="expandBtn">+</button></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td><button class="expandBtn">+</button></td>
    </tr>
  </tbody>
</table>

JavaScript：

$(function() {
  // 绑定点击事件
  $('#mainTable').on('click', '.expandBtn', function() {
    var tr = $(this).closest('tr');
    var row = $('#mainTable').DataTable().row(tr);
    if (row.child.isShown()) {
      // 关闭子表格
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // 展开子表格
      var data = row.data();
      var childTable = '<table><thead><tr><th>课程</th><th>成绩</th></tr></thead><tbody><tr><td>语文</td><td>90</td></tr><tr><td>数学</td><td>80</td></tr></tbody></table>';
      row.child(childTable).show();
      tr.addClass('shown');
    }
  });
});

在这个示例代码中，我们使用了DataTables插件来处理表格数据，并使用了Bootstrap样式来美化表格。在展开子表格时，我们手动创建了一个新的表格，并将其添加到主表格行中。实际应用中，您可以使用ajax方法从服务器获取子表格数据。