點擊按鈕後添加新的輸入

我需要一個按鈕，每次單擊按鈕後都會添加一個新的文本和輸入。點擊按鈕後添加新的輸入

單擊按鈕一次後的所需輸出。

但考慮到我的下列代碼，我的新的輸入將覆蓋初始輸入。

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

來源

2016-12-31 Test Account

檢查下面的代碼 –

此代碼

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

html的（）上TR將與新輸入TD元素取代TR元素的HTML ，你應該在tr元素中添加新的輸入td元素。

已編輯：此代碼將替換DOM中tr元素的html，因爲選擇器$（'tr'）將選擇存在於DOM中的tr元素。

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

，但如果你想新建一個新的TR元素，代碼應該是

$（ ''）。appendTo（ 'TBODY'）的.html（ '新輸入'）; }）;

$（''）將創建一個新元素。

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

來源

2016-12-31 06:21:43 Deep

但它附加到前面的輸入側。我希望它在前面的輸入下面附加。 –

你想要一個新的行嗎？你的代碼看起來像試圖添加一個新的TD。 – Deep

我想我畫了我想要的輸出的圖片... –

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

來源

2016-12-31 06:20:50

但其附加到輸入透水的側面。我希望它在前面的輸入下面附加。 –

@TestAccount現在測試它 –

嘗試做追加它做tr，而不是像這樣：

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

這將追加，而不是追加一個新元素嵌套在tr標籤的新元素身體因此壓倒自己

來源

2016-12-31 06:22:27

您可以使用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>

來源

2016-12-31 06:28:44

點擊按鈕後添加新的輸入

回答

相關問題