Генерировать динамические поля ввода на основе выбора

Question

Мне нужна форма, которая должна иметь выбор, чтобы не выбрать участника. На основании номера пользователь выбирает номер строки таблицы, сгенерированный для ввода. В данный момент у меня есть следующий .., который имеет выделение .... но максимальное поле четырех строк определено. Пользователь выбирает только номер участника, а затем заполняет форму. Я хочу, чтобы пользователь сначала не выбирал участника. например, пользователь выбирает 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