버튼을 클릭 한 후 새 입력 추가

버튼을 클릭 한 후 새 텍스트를 추가하고 매번 입력 할 버튼이 필요합니다.버튼을 클릭 한 후 새 입력 추가

버튼을 누른 후 원하는 출력을 한 번 클릭하십시오.

하지만 내 다음 코드를 부여, 나의 새로운 입력은 초기 입력을 무시합니다.

<!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 중에서()을 새로운 입력 TD 원소 TR 소자의 HTML을 대체 TR에 , 너는 ap 새로운 요소 인 td 요소를 tr 요소에 보류하십시오.

수정 됨 :이 코드는 선택기 $ ('tr')가 DOM에있는 tr 요소를 선택하기 때문에 DOM에서 tr 요소의 html을 대체합니다.

$('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 태그에 중첩 된 새로운 요소를 추가합니다

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

따라서 본체 자체를 재정 의하여

출처

2016-12-31 06:22:27

Jquery를 사용할 수 있습니다.다른 요소를 추가하십시오.

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

버튼을 클릭 한 후 새 입력 추가

답변

관련 문제