javascript - 单击时使表格展开

Question

我想知道如何在表格中的一行下插入一个 div 甚至多个表格行。

我的代码:

<div class="panel-body">
   <form method="POST" action="#re-order">
  <table id="menu" class="table">
        <thead>
          <tr>
            <th>Menu</th>
            <th style="width:50px !important;">Re-order</th>
            <th style="width:50px !important;"></th>
         </tr>
        </thead>
        <tbody>
         <?php
         $a = 0;
         foreach($menus as $menu){
         ?>
          <tr id="<?=$menu['_id'];?>">
            <td><?=$menu['title'];?></td>
            <input type="hidden" name="menu[<?=$a;?>][id]" value="<?=$menu['_id'];?>">
            <td><input type="text" maxlength="2" class="form-control input-sm" value="<?php if(!empty($menu['order'])){ print $menu['order'];}?>" name="menu[<?=$a;?>][order]"></td>
            <td><button type="button" onclick="deletemenu('<?=$menu['_id'];?>');" class="btn btn-sm btn-danger">X</button></td>
          </tr>
          <?php
               $a++;
            }
          ?>

        </tbody>
      </table>
      <br>

我想做的是，如果菜单作为子菜单，我希望在它的左侧有一个按钮，上面写着显示子菜单。这将允许用户重新排序子菜单以及编辑和删除菜单项。

我的问题是不破坏我们已有的表单，我想将其插入相应的菜单项下方，并允许用户执行他们需要的操作。

我将能够解决表单问题(因为在表单中包含表单是不好的做法。我只是想知道我应该这样做(最佳做法吗？)，如果是的话，我将如何插入行.

选项 2) 将是一个简单的灯箱创意或菜单页面的重新加载，并且只加载子菜单。

Answer 1

您可以使用 tbody 元素的 insertRow(index) 函数和 rows 集合在必要时操作和插入行。

var tbody = document.getElementById('tbody_id');

// replace row_index with tbody.rows.length for bottom of the table
var tr = tbody.insertRow(row_index);

// set properties of tr as you would normally, appending td children as required.
tr.style.backgroundColor = '#cccccc';
tr.style.color = 'white';
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));