Question

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

实施例：如果用户在名为“No of Candidates”的字段中输入3，则脚本应为每个候选人的信息生成3行，其中包含“姓名”，“电子邮件”，“电话”，“性别”和“职位”等字段。

请在html下方找到“No of Candidate”字段和要生成的字段，以便用户输入每个候选人的信息。

请注意：要生成的字段基于用户的输入。即它可以是3,5,10 e.t.c

<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());
        }
    }
});

<强> Working Fiddle

修改

1。）我刚刚命名了一个表，其中包含一个ID的学生信息，因此很容易定位...

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

3。）我只是将模板行存储到一个单独的div中，并使用display：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，使用div？），其中累积ID为1-50。默认情况下将display:hidden全部应用于它们，然后从1到cand_no的javascript循环将显示更改为阻止。

如何根据javascript中的用户输入动态生成输入字段

2 个答案: