Question

我最近开始学习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>

Answer 1

使用Jquery .append（“任何dom元素”）。

作为示例，我在您的代码中添加了一个代码段

<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>");

Answer 2

http://devzone.co.in/add-remove-rows-in-table-dynamically-using-jquery/

此链接可帮助您添加HTML表格行和文本框值

如何使用jQuery填充HTML表中动态创建的行中的文本框值

2 个答案: