Question

我想添加多个文本输入，但是如何？只需在屏幕上输入我想要的输入数量就是我在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>')
    }); 
});

Answer 1

首先请注意，您不能只追加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>

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <executions>
        <execution>
            <goals>
                <goal>repackage</goal>
            </goals>
            <configuration>
                <classifier>exec</classifier>
            </configuration>
        </execution>
    </executions>
</plugin>

Answer 2

试试这个：

＆＃13;

$(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>")
            
        }
        
    })
    
    
})

＆＃13;

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

＆＃13;

添加多个输入

2 个答案: