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

住友

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

使用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条评论
登录后参与评论

相关文章

来自分类Dev

MVC 4:使用JQUERY和PartialViewResult动态创建HTML文本框。如果代码是动态添加的,如何填充模型?

来自分类Dev

MVC 4:使用JQUERY和PartialViewResult动态创建HTML文本框。如果代码是动态添加的,如何填充模型?

来自分类Dev

如何从输入文本框的值动态添加HTML表中的表行

来自分类Dev

如何使用jquery检查一行中的所有文本框是否都已填充

来自分类Dev

如何基于html页面中的组合框中的值填充文本框的值

来自分类Dev

如何使用jquery或javascript从html表中删除文本框而不丢失文本框值

来自分类Dev

在表中动态创建的文本框丢失了文本值

来自分类Dev

从PHP中动态创建的文本框中检索值?

来自分类Dev

使用JQuery检查动态创建的文本框的值

来自分类Dev

如何使用jQuery在隐藏的文本框中设置值

来自分类Dev

在PowerPoint中动态填充文本框

来自分类Dev

动态创建的文本框中的值求和

来自分类Dev

动态创建的文本框中的值求和

来自分类Dev

如何获取jQuery中动态创建的文本框的动态ID

来自分类Dev

jQuery在动态创建的文本框中检测Enter键

来自分类Dev

如何在表格中获取文本框值

来自分类Dev

使用值预填充UserForm中的文本框

来自分类Dev

动态创建文本和按钮控件,并使用日期值填充文本框

来自分类Dev

如何从动态创建的 div 中获取文本框值

来自分类Dev

如何调用 ac# 函数将值填充到 razor html 文本框中?

来自分类Dev

在Powershell GUI中动态填充文本框中的文本

来自分类Dev

使用jQuery聚焦到表格行中的.next()td文本框

来自分类Dev

如何使用表格在模态中输入文本框

来自分类Dev

获取动态 jquery 填充的文本框值 onchange

来自分类Dev

如何在jQuery动态表数据中获取文本框的值

来自分类Dev

使用jquery在文本框中动态添加值

来自分类Dev

如何使用DevExtreme在angularJS中获得自动填充文本框值

来自分类Dev

在jQuery中动态添加文本框

来自分类Dev

在HTML中动态添加文本框

Related 相关文章

  1. 1

    MVC 4:使用JQUERY和PartialViewResult动态创建HTML文本框。如果代码是动态添加的,如何填充模型?

  2. 2

    MVC 4:使用JQUERY和PartialViewResult动态创建HTML文本框。如果代码是动态添加的,如何填充模型?

  3. 3

    如何从输入文本框的值动态添加HTML表中的表行

  4. 4

    如何使用jquery检查一行中的所有文本框是否都已填充

  5. 5

    如何基于html页面中的组合框中的值填充文本框的值

  6. 6

    如何使用jquery或javascript从html表中删除文本框而不丢失文本框值

  7. 7

    在表中动态创建的文本框丢失了文本值

  8. 8

    从PHP中动态创建的文本框中检索值?

  9. 9

    使用JQuery检查动态创建的文本框的值

  10. 10

    如何使用jQuery在隐藏的文本框中设置值

  11. 11

    在PowerPoint中动态填充文本框

  12. 12

    动态创建的文本框中的值求和

  13. 13

    动态创建的文本框中的值求和

  14. 14

    如何获取jQuery中动态创建的文本框的动态ID

  15. 15

    jQuery在动态创建的文本框中检测Enter键

  16. 16

    如何在表格中获取文本框值

  17. 17

    使用值预填充UserForm中的文本框

  18. 18

    动态创建文本和按钮控件,并使用日期值填充文本框

  19. 19

    如何从动态创建的 div 中获取文本框值

  20. 20

    如何调用 ac# 函数将值填充到 razor html 文本框中?

  21. 21

    在Powershell GUI中动态填充文本框中的文本

  22. 22

    使用jQuery聚焦到表格行中的.next()td文本框

  23. 23

    如何使用表格在模态中输入文本框

  24. 24

    获取动态 jquery 填充的文本框值 onchange

  25. 25

    如何在jQuery动态表数据中获取文本框的值

  26. 26

    使用jquery在文本框中动态添加值

  27. 27

    如何使用DevExtreme在angularJS中获得自动填充文本框值

  28. 28

    在jQuery中动态添加文本框

  29. 29

    在HTML中动态添加文本框

热门标签

归档