單擊時使表擴展

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