Добавление нескольких входных данных

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хочу добавить несколько текстовых входных данных, но как? Просто ввод количества входных данных, которые я хочу вывести на экран, — это единственный ввод, который я объявил в HTML.

Допустим, я ввожу число 3 тогда, когда нажимаю кнопку. Должно появиться количество введенных мной входных данных. На самом деле он добавляет только один ввод за клик и игнорирует введенные данные во входных данных. Как я могу это исправить?

 <!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
</head>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/test.js"></script>
<body>          
    <input type="text" id="inp1" name="inp1" placeholder="Number of inputs">    
    <button type="button" name="btn" id="btn">Add</button>

    <table id="table" name="table">
        <tbody></tbody>
    </table>    
</body>
</html>

 $(document).ready(function() {
    $(document).on('click', '#btn', function() {    
        $('#table tbody').append('<input></input>')
    }); 
});

Ответ №1:

Во-первых, обратите внимание, что вы не можете просто добавить an input как дочерний элемент a tbody . Вам нужно поместить его в a td , который, в свою очередь, должен быть в a tr . Также обратите внимание, что input это самозакрывающийся, поэтому вы должны только добавлять <input /> .

Для достижения того, что вам нужно, вы можете использовать простой for цикл, используя введенное значение в качестве ограничителя итерации (после того, как вы разобрали его до целого числа). Попробуйте это:

 $(document).ready(function() {
  $(document).on('click', '#btn', function() {
    for (var i = 0; i < parseInt($('#inp1').val(), 10); i  ) {
      $('#table tbody td').append('<input />')
    }
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="inp1" name="inp1" placeholder="Number of inputs">
<button type="button" name="btn" id="btn">Add</button>

<table id="table" name="table">
  <tbody>
    <tr><td></td></tr>
  </tbody>
</table>

Ответ №2:

Попробуйте это:

 $(document).ready(function() {
    
    $("#btn").on("click",function(){
        
        var number = $("#inp1").val();
        
        number = parseFloat(number);
        
        for (var i=1; i <= number; i  ){
            
            $("#table tbody").append("<br>Number "   i   " : <input type=text><br>")
            
        }
        
    })
    
    
})

 <input type="text" id="inp1" name="inp1" placeholder="Number of inputs">  

<button type="button" name="btn" id="btn">Add</button>
<table id="table" name="table">
        <tbody></tbody>
</table>    
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>