添加多個輸入

我想添加多個文本輸入，但如何？在屏幕上輸入我想要的輸入數量是我在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>') 
    }); 
});

來源

2016-10-01 xblade52

首先請注意，你不能只追加一個input爲tbody的孩子。您需要將它放在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

添加多個輸入

回答

相關問題