如何基于javascript中的用户输入动态生成输入字段

Question

我正在创建一个课程注册表格，要求用户输入所需数量的候选人，这些候选人将从他或她的公司上课。

示例：如果用户在名为“ No No Candidates”的字段中输入3，则脚本应为每个候选人的信息生成3行，其中包含“ Name”，“ Email”，“ Phone”，“ Sex”和“ Position”等字段。

请在html下面找到“ No No Candidate”字段，并生成要让用户输入每个候选人信息的字段。

请注意：要生成的字段取决于用户的输入。 即可以是3、5、10等

<p>
<label><strong>No of Candidates</strong></label>
<label><input name="cand_no" type="text" placeholder="Type Your Number of Candidates" onchange='this.form.submit()' /></label>
  <div class="clear"></div>
</p>



    <div class="cand_fields">
    <table width="630" border="0">
      <tr>
        <td>Name</td>
        <td width="20">Sex</td>
        <td>Email</td>
        <td>Phone</td>
        <td width="40">Position</td>
      </tr>
      <tr>
        <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
        <td>
        <select name="cand_sex" required="required">
        <option value=" "> </option>
        <option value="Male">Male</option>    
        <option value="Female">Female</option>
        </select>
        </td>
        <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
        <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
        <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
    </table></div>

我已经用php尝试过了，但是从服务器端这样做并不愉快。 因此，我真的需要使用javascript从客户端完成此操作。

如果能用javascript实现，我将不胜感激。

太感谢了！

Answer 1

试试这个..使用.change()事件。

我创建了一个模板类 ，其中包含模板行..然后使用.clone()将行插入表中。

$('[name="cand_no"]').on('change', function() {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#studentTable tbody').append($cloned.html());
        }
    }
});​

工作小提琴

编辑

1.）我刚刚命名了包含ID的学生信息表，以便轻松定位。

2.）克隆只是创建有问题的元素的副本，即template。 因此，对于在输入中输入的条目数，我们编写了一个for循环并将模板行附加到Student表。

3.）我只是将模板行存储到一个单独的带有显示的div中：none，以便它在屏幕上不可见..这只是从中复制HTML并将其追加到新表中。

<div class="template" style="display: none">
    <table>
    <tr >
         <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
         <td>
            <select name="cand_sex" required="required">
               <option value=" "> </option>
               <option value="Male">Male</option>
               <option value="Female">Female</option>
            </select>
         </td>
         <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
         <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
         <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
  </table>
</div>

Answer 2

我可能建议您cand_no更改为下拉列表，否则您将必须验证输入是数字而不是文本。

然后我会说表的50个版本（ack，使用divs？），其渐进ID为1-50。 套用display:hidden默认情况下对它们全部display:hidden ，然后执行从1到cand_no的javascript循环，将显示更改为块。