JQuery应用案例--自动增加行

发布时间:2016-12-9 17:53:40 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"JQuery应用案例--自动增加行",主要涉及到JQuery应用案例--自动增加行方面的内容,对于JQuery应用案例--自动增加行感兴趣的同学可以参考一下。

使用JQuery实现自动增加行的功能。如下图,输入文本框内输入用户名和密码,点击增加,上方的表格就生成一行包含刚才输入的用户名和密码,并且还有删除本行的按钮。 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <center> <table id="tableID" border="1" align="center" width="60%"> <thead> <tr> <th>用户名</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody id="tbodyID"> <!-- 动态增加行 --> </tbody> </table> <hr /> 用户名:<input type="text" id="usernameID" /> 密码: <input type="text" id="passwordID" /> <input type="button" value="增加" id="addID" /> </center> </body> <script type="text/javascript"> $(function(){ //将光标定位到用户名文本框 $("#usernameID").focus(); }); $("#addID").click(function() { //创建行 var $tr = $("<tr></tr>"); //获取文本框中的用户名和密码,并将其添加到行中 $tr.append($("<th>" + $("#usernameID").val() + "</th>")); $tr.append($("<th>" + $("#passwordID").val() + "</th>")); //创建删除按钮 var $del = $("<th><input type='button' value='删除' id='delID'></th>"); //向行中添加删除按钮 $tr.append($del); //创建删除事件 $del.click(function() { $tr.remove(); }); //将创建的行添加到表格中 $("#tbodyID").append($tr); //添加完之后将文本框清空 $("#usernameID").val(""); $("#passwordID").val(""); }); </script> </html>

上一篇:jquery中的ajax(异步xml和javascript通信)
下一篇:C++基础之---union联合体大小分析

相关文章

相关评论