jQuery를 사용하여 HTML 테이블에서 동적으로 생성 된 행의 텍스트 상자 값을 채우는 방법

Sumit

저는 최근에 jQuery를 배우기 시작했고 스크립트 작성에 도움이 필요합니다. 저는 이것을 연습으로하고 있습니다.

HTML에 대한 내 코드는 다음과 같습니다.

버튼을 클릭하면 테이블에 행을 만들고 jQuery를 사용하여 텍스트 상자의 값을 채우고 싶습니다.

<html>
  <head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script></script>
</head>
 <body><br>
      First Name<br><input type ="text" id="firstname"></input><br><br>
      Employee ID<br><input type="text" id="empid"></input><br><br>
      Phone No<br><input type="text"    id="phnno"></input><br><br>
      <button type="button" id="btnSubmit">Submit</button><br><br><br>

 <table id="mytable" border="1" class="tbinput" style="width:30%">
  <tr>
    <th>Name</th>
    <th>EmployeeID</th>     
    <th>Phone No</th>
  </tr>
</table> 

</body>
</html>
Girish Bhat 남

Jquery .append ( "any dom element")를 사용하십시오.

예를 들어 코드에 스 니펫을 추가했습니다.

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
 $(document)
		.ready(
				function() {
				  $(document).on("click","#btnSubmit",function(){
				                                  $("#mytable").append("<tr><td>"+$("#firstname").val()+"</td><td>"+$("#empid").val()+"</td><td>"+$("#phnno").val()+"</td></tr>");
				                                               }
               )
});
</script>
</head>
 <body><br>
      First Name<br><input type ="text" id="firstname"></input><br><br>
      Employee ID<br><input type="text" id="empid"></input><br><br>
      Phone No<br><input type="text"    id="phnno"></input><br><br>
      <button type="button" id="btnSubmit">Submit</button><br><br><br>

 <table id="mytable" border="1" class="tbinput" style="width:30%">
  <tr>
    <th>Name</th>
    <th>EmployeeID</th>     
    <th>Phone No</th>
  </tr>
</table> 

</body>
</html>

 $("#mytable").append("<tr><td>"+$("#firstname").val()+"</td><td>"+$("#empid").val()+"</td><td>"+$("#phnno").val()+"</td></tr>");

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관