单击时使表扩展

Question

I would like to know how to insert a div or even a number of table rows under a row in a table.

My code:

<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>

What I want to do is if a menu as a submenu I want a button to be on the left of it saying show submenus. This will allow the user to re-order the submenu as well as edit and delete a menu item.

My issue is without upsetting the form we already have I want to insert it below the corresponding menu item, and allow the user to do what they need.

I will be able to work out the form issue (as it is bad practice to have a form in a form. I just want to know should I do this (best practice?) and if so how would I insert the rows.

Option 2) would be a simple lightbox idea or a re-feash of the menu page and only load the submenu.

Answer 1

You can use the tbody element's insertRow(index) function and rows collection to manipulate and insert rows where necessary.

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