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

Question

我最近开始学习 jQuery 并且在编写脚本方面需要帮助 - 我正在这样做作为练习。

我的 HTML 代码如下。

单击按钮我想在 table 中创建行并使用 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

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

此 Link 可帮助您添加 HTML table 行以及文本框值

Answer 2

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

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

How to fill textbox values in dynamically created rows in an HTML Table using jQuery

html

html-table