Question

我有一张预订表格，如下所示：

<table border=0> 
    <tr>  
            <td colspan="2"><h2>Book Now</h2>   </td>  
            </tr> 
        <tr>  
            <td width="139"> Select Date (dd/mm/yy):</td>  
            <td width="351"> <input type="text"  id="datepicker"> </td>  
        </tr> 
        <tr>
          <td>Select Category:</td>
          <td>&nbsp;</td>
        </tr>
         <tr>
          <td colspan="2"><select name="orgSelect" class="orgSelect">
<option value="0">----Select CAtegory----</option>
<option value="1">CAtegory 1</option>
<option value="2">CAtegory 2</option>
</select></td>
<tr>
<td>Select Product:</td><td>&nbsp;</td>
</tr>
          </tr>
        <tr>

        </tr>
        <tr>
          <td colspan="2"><select name="terrSelect" class="terrSelect">
<option value="0" class="static">----Select Product----</option>
<option value="1" class="sub_1">Product1</option>
<option value="2" class="sub_1">Product2</option>
</select>
   </td>
        </tr>       
        <tr>  
            <td> Number of Persons</td>  
            <td>
              <select name="persons" id="persons">
                <option>select</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select></td>  
        </tr>  
        <tr>  
            <td><strong>Information:</strong></td>  
            <td>&nbsp;</td>  
        </tr>
         <tr>  
            <td>1st Member: </td>  
            <td>&nbsp;</td>  
        </tr>
         <tr>
           <td>First Name:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Last Name:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Email:</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Phone</td>
           <td><input type="text" name="date" value=""></td>
         </tr>
         <tr>
           <td>Mobile Phone</td>
           <td><input type="text" name="date" value=""></td>
         </tr> 
    </table>
    <p>Add Member</p>

但我有一个问题，最后它说“添加MEmber”我想复制预订表格，我们第三个人也要预订，我怎样才能将这个复制到预订表格？

Answer 1

有很多方法可以存档。一种简单的方法是将所有数据提交到服务器，整个表单将在其中重建。在javascript端执行此操作可以使用模板完成（我假设您使用jquery）。

服务器端解决方案（作为最终提交）要求您的输入名称是明确形成的。

示例：

data[members][{$memberId}][name]

如果你想确定，如果表格是以最终形式提交的，还是只是为了添加一个成员，你可以像这样形成提交按钮：

<input type="submit" name="btn[submit]" value="submit booking" />
<input type="submit" name="btn[add]" value="submit booking" />

在php端，这可以通过以下方式确定：

$btnType = isset($_REQUEST['btn']) && is_array($_REQUEST['btn']) ? array_shift(array_keys($_REQUEST['btn'])) : 'submit';

仍然需要改进！

Answer 2

您可以使用多个表体，这将使解决方案非常简单，并且在客户端浏览器中禁用javascript的情况下也可以使用：

<body>

<table border=0 id="table1">

    <tbody>
        <tr>  
            <td colspan="2"><h2>Book Now</h2>   </td> 
            ...
            <select name="persons" id="persons" onchange="change_persons(this.value)">
            ...
            <td><strong>Information:</strong></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>1st Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile1" value=""></td>
        </tr> 
    </tbody>

    <tbody>
        <tr>
            <td>2nd Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile2" value=""></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>3rd Member: </td>
            ...
            <td>Mobile Phone</td>
            <td><input type="text" name="mobile3" value=""></td>
        </tr>
    </tbody>
</table>

<script language="javascript">
<!--
function change_persons(show) {
    var bodies = document.getElementById('table1').tBodies;
    for (var i=1, l=bodies.length; i<l; i++) {
        bodies[i].style.display = (i<=show)? 'block':'none';
    }
}
change_persons(1); // at startup we show only 1 person
//--></script>

</body>

完整的HTML here

Answer 3

编辑：只是不要混淆你，我才意识到我使用Stano和Eric的html作为表格布局。

我绝对推荐使用jQuery，它会让事情变得更容易。您可以使用以下行将其添加到您的页面：

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

然后我会使用添加成员选项的按钮：

<button id='addMember'>Add new member</button>

您还应该为表格提供ID

<table id='bigTable' border=0>

在js文件中，您可以使用以下内容：

$(document).ready(function() {
 var currentMember = 2;
 $(function() {
  $('#addMember').click(function(event) {
   $('<tbody>')
    .attr('id', 'subTableMember'+currentMember);
    .appendTo('#bigTable');
   $('<tr>')
    .attr('id', 'tableRowMember'+currentMember);
    .appendTo('#subTableMember'+currentMember);
   $('<td>')
    .html(currentMember+'th member')
    .appendTo('#tableRowMember'+currentMember);
   $('<td>')
    .html('<input type="text" name="mobile'+currentMember+'">');
    .appendTo('#tableRowMember'+currentMember);
   currentMember++;
  });
 });
});

我没有测试过代码，但它应该可以帮助你开始使用。

另一个编辑：如果忘了服务器部分。在您的PHP代码上，您现在可以使用以下内容：

foreach($_POST as $key=>$val) {
 if(substr($key, 0, 6) == 'mobile') {
  //This is a member mobile, add it to your DB or whatever
  echo $key.' => '.$val;
 }
}

这样，用户可以添加他想要的所有成员，并且您可以全部处理它们。

重复的成员表格

3 个答案: