單擊桌面時消耗的表格

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