0

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

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

请在 html 下方查找“候选人编号”字段和要生成的字段，供用户输入每个候选人的信息。

请注意：要生成的字段是基于用户的输入。即它可以是 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实现，我将不胜感激......

太感谢了！

4

2 回答 2

1

Try this .. Using the .change() event..

I have created a template class that holds the template row .. Then using .clone() to insert the rows into table..

$('[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

EDIT

1.) I have just named the table which holds the student information with an ID so that it will be easy to target..

2.) Clone just create's a copy of the element in question i.e, template . So for the number of entries entered in the input , we write a for loop and append the template row to the student table.

3.) I am just storing the template row into a separate div with display: none so that it is not visible on the screen .. this is just to copy the HTML from it and append to the new table.

<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>
于 2012-10-30T19:16:29.083 回答
0

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

然后我会添加 50 个版本的表格（确认，使用 div？），渐进式 ID 为 1-50。默认情况下对它们全部应用display:hidden，然后有一个 javascript 循环从1更改cand_no显示到阻止。

于 2012-10-30T18:43:05.873 回答