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

【问题标题】：How to fill textbox values in dynamically created rows in an HTML Table using jQuery如何使用 jQuery 在 HTML 表中动态创建的行中填充文本框值
【发布时间】：2015-02-25 10:42:34
【问题描述】：

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

【问题讨论】：

标签： html html-table

【解决方案1】：

使用 Jquery .append("任何 dom 元素")。

例如，我在您的代码中添加了一个 sn-p

<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("&lt;tr&gt;&lt;td&gt;"+$("#firstname").val()+"&lt;/td&gt;&lt;td&gt;"+$("#empid").val()+"&lt;/td&gt;&lt;td&gt;"+$("#phnno").val()+"&lt;/td&gt;&lt;/tr&gt;");

【讨论】：

谢谢 Girish，我写的和你的第一个提示完全一样，它起作用了。再次感谢整个 sn-p：p

【解决方案2】：

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

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

【讨论】：