Question

我需要一个按钮，每次点击按钮后都会添加一个新文本和输入。

单击按钮一次后所需的输出。

但是考虑到我的以下代码，我的新输入将覆盖初始输入。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#addnewinputbtn').click(function() {
        $('tr').appendTo('tbody')
          .html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });
    });
  </script>
</body>

</html>

Answer 1

此代码

 $('tr').appendTo('tbody').html(
   '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
 });

tr上的

.html（）将用新的输入td元素替换tr元素的html，你应该在tr元素中追加新的输入td元素。

编辑：此代码将替换DOM中tr元素的html，因为选择器$（＆＃39; tr＆＃39;）将选择DOM中存在的tr元素。

$('tr').appendTo('tbody')
          .html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });

但是如果你想创建一个新的tr元素，那么代码应该是

$（＆＃39;＆＃39;）appendTo（＆＃39; TBODY＆＃39）。 html的（＆＃39;新输入＆＃39;）; }）;

$（＆＃39;＆＃39;）将创建一个新元素。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document)
      .ready(
        function() {
          $('#addnewinputbtn')
            .click(
              function() {
                
         $('<tr>').appendTo('tbody').html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });

        });
  </script>
</body>

</html>

＆＃13;

Answer 2

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document)
      .ready(
        function() {
          $('#addnewinputbtn')
            .click(
              function() {
                $('tbody')
                  .append(
                    '<tr><td>New Input <input type="text" class="form-control" readonly="readonly"></td></tr>');

              });
        });
  </script>
</body>

</html>

Answer 3

尝试附加tr而不是这样：

$('tr').append(...);

那将附加一个嵌套在tr标签中的新元素，而不是将新元素附加到主体上，从而覆盖自身

Answer 4

您可以使用Jquery append添加其他元素。

function AddTextBox(){
  $("#populateInput").append('<input type="text" class="customControl"/>')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="AddTextBox()">Add Input</button>
<div id="populateInput">
  </div>

单击按钮后添加新输入

4 个答案: