Question

此论坛上弹出的所有示例都与我当前的问题无关，

目前，我们有三行文本框，可能会在以后添加更多行。

以下是示例代码：

<body>
<div class="bs-example">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label  for="employeename">Employee Name</label><br>
            <input type="email" style="width:250px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
        </div>
        <div class="form-group">
            <label for="ttitle">Title</label><br>
            <input type="password" style="width:250px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label><br>
            <input type="password" style="width:250px;"  class="form-control" id="inputPassword" placeholder="Password">
        </div><br><br><br>

                <div class="form-group">
                    <label for="inputName">Name</label><br>
                    <input type="text" style="width:250px;" class="form-control" id="inputName" placeholder="Name">
                </div>
                <div class="form-group">
                    <label for="inputAddress">Address</label><br>
                    <input type="text" style="width:250px;" class="form-control" id="inputAddress" placeholder="Address">
                </div>
                <div class="form-group">
                    <label for="inputIncome">Income</label><br>
                    <input type="text" style="width:250px;"  class="form-control" id="inputIncome" placeholder="Income">
        </div><br><br><br>
        <div class="form-group">
            <label class="sr-only" for="inputSpouse">Spouse</label>
            <input type="text" style="width:250px;" class="form-control" id="inputSpouse" placeholder="Spouse">
        </div>
        <div class="form-group">
            <label for="inputPassword">Affiliation</label>
            <input type="text" style="width:250px;" class="form-control" id="inputAfil" placeholder="Affilatio n>
        </div>
        <div class="form-group">
            <label for="inputDOB">DOB</label>
            <input type="text" style="width:250px;"  class="form-control" id="inputDOB" placeholder="Date of birth">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
    <br>
</div>
</body>

是否可以逐行动态创建其他文本框？

换句话说，根据上面的代码，有三行，用户可能需要为一行或多行而不是所有行创建其他文本框。

那么，任何人都有任何想法如何逐行动态创建其他行而不是一次为所有行添加文本框？

我希望你们中的一位专家可以提供帮助。

Answer 1

最简单的方法就是这样。您可以创建动态tr并将其附加到tbody的{{1}}

＆＃13;

table

＆＃13;

$(":button").click(function(){
  var str = "<tr>";
  str+="<td><input type=textbox class=txtFirst /></td>";
  str+="<td><input type=textbox class=txtSecond /></td>";
  str += "</tr>";
  $("table tbody").append(str);
});

＆＃13;

Answer 2

您并不具体说明需要创建哪些行。在任何情况下，你都可以使用......

https://jsfiddle.net/2nayvcmx/

HTML

    <div>
  Employee name
</div>
<div>
  <input type="text" id="employee_name" value="" name="employee_name" />
</div>
<div>
  Employee title
</div>
<div>
  <button id="add_employee_title">
    Add title
  </button>
</div>
<div class="add_employee_title">

</div>
<hr/>
<input type="submit" value="Submit" />

的Javascript

$(document).ready(function() {
  $('button#add_employee_title').click(function() {

    $(this).hide();
    $('div.add_employee_title').html('<input type="text" name="employee_title"/>');
  });
});

逐行动态添加输入文本框

2 个答案: