0

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

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

但我有一个问题，最后它说“添加会员”我喜欢复制预订表格，第二个我们的第三个人也预订，我怎样才能让这个复制预订表格？

4

3 回答 3

0

有很多方法可以存档。一种简单的方法是将所有数据提交到服务器，在服务器上重建整个表单。在 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';

仍有改进可应用！

于 2012-07-06T11:00:56.207 回答
0

您可以使用多个表格主体，这将使解决方案非常简单，并且在客户端浏览器中禁用 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在这里

于 2012-07-06T11:47:39.437 回答
0

编辑：只是为了不让你感到困惑，我刚刚意识到我使用了 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;
 }
}

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

于 2012-07-06T12:10:27.937 回答