Question

我需要一个表格，可以选择不选择会员。基于数字，用户选择为输入生成的表行数。此时我有以下一个...有选择....但最大四行字段定义。用户只选择成员号，然后填写表格。我希望该用户首先选择no成员。例如，用户选择2 ...然后将生成2行以填充。

 <div class="form-group">
      <label>
        No Of Members: <select name="member" class="form-control" required>
          <option value="0">Select</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
          <option value="4">4</option>


       </select>
    </label>
  </div>

 <div>           
          <table class="table table-bordered">
                <thead>
                    <tr class="active">
                        <th>Student ID</th>
                        <th>Name</th>
                        <th>Email </th>
                        <th>CGPA</th>

                    </tr>
                </thead>
                <tbody>
                      <tr>
                        <td><input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID" required></td>
                        <td><input type="text" name="name" class="form-control" id="" placeholder="Enter Name" required></td>
                        <td><input type="text" name="email" class="form-control" id="" placeholder="Enter Email" required></td>
                        <td><input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA" required></td>
                    <tr/>
                    <tr>
                        <td><input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"></td>
                        <td><input type="text" name="name" class="form-control" id="" placeholder="Enter Name"></td>
                        <td><input type="text" name="email" class="form-control" id="" placeholder="Enter Email"></td>
                        <td><input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"></td>
                    <tr/>
                    <tr>
                        <td><input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"></td>
                        <td><input type="text" name="name" class="form-control" id="" placeholder="Enter Name"></td>
                        <td><input type="text" name="email" class="form-control" id="" placeholder="Enter Email"></td>
                        <td><input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"></td>
                    <tr/>
                    <tr>
                        <td><input type="text" name="studentid" class="form-control" id="" placeholder="Enter Student ID"></td>
                        <td><input type="text" name="name" class="form-control" id="" placeholder="Enter Name"></td>
                        <td><input type="text" name="email" class="form-control" id="" placeholder="Enter Email"></td>
                        <td><input type="text" name="cgpa" class="form-control" id="" placeholder="Enter CGPA"></td>
                    <tr/>


                </tbody>
            </table>
        </div>

我在JSFiddle [http://jsfiddle.net/sushanth009/H3z5P/]中找到了类似的解决方案。但它有一个问题....每次我输入一个数字....它会添加前一行的行数。它没有选择。

Answer 1

您应该在问题中包含小提琴的密码。

如果我理解您的需求，您似乎需要根据表的大小和请求的行数来添加或减去行。因此，您可以测试当前数字并进行调整，如下所示：

$('[name="cand_no"]').on('change', function() {
  // Not checking for Invalid input
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    var rows = $('#studentTable tr'),
        rowCnt = rows.length - 1; // Allow for header row

    if (rowCnt > val) {
        for (var i = rowCnt; i > val; i--) {
            rows[i].remove();
        }
    }
    if (rowCnt < val) {
        for (var i = 0; i < val - rowCnt; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#studentTable tbody').append($cloned.html());
        }
    }
  }
});

请参阅Fiddle

根据选择生成动态输入字段

1 个答案: