複数の入力を追加する

複数のテキスト入力を追加したいのですがどうしますか？私がHTMLで宣言した唯一の入力は、画面上に入力する数を入れるだけです。複数の入力を追加する

ボタンを押したときに番号3と入力したとします。入力した入力数が表示されます。実際には、1回のクリックで1つの入力が追加され、入力内の入力データは無視されます。これをどうすれば解決できますか？

<!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>') 
    }); 
});

出典

2016-10-01 xblade52

まずあなただけtbodyの子としてinputを追加することができないことに注意してください。 tdの中に配置する必要があり、順番に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>

出典

2016-10-01 15:42:43

すごいです！ありがとうございます。私はまだ学んでいる、まだ赤ちゃんのステップを取る。 – xblade52

はこれを試してみてください：

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

出典

2016-10-01 15:59:39 Ehsan

お時間をいただきありがとうございます。ほんとうにありがとう。 – xblade52

複数の入力を追加する

答えて

関連する問題