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>

我想要做的是如果一个菜单作为子菜单我想要一个按钮在它左边说show子菜单。这将允许用户重新排序子菜单以及编辑和删除菜单项。

我的问题是没有破坏我们已经拥有的表单我希望将其插入相应的菜单项下面，并允许用户执行他们需要的操作。

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

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

单击时使表格消耗

1 个答案: