单击时使表扩展

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