动态添加文本框并获取文本框的值
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.7.2.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function btnadd() { //点击添加文本框(这里面我用了两个图片作为添加删除的控件) $("thead").append("<tr><td>文本1:<input id=\"txtOne\" /></td ><td>文本2:<input id=\"txtTwo\" /></td><td>文本3:<input id=\"txtThree\" /></td><td> <a class=\"remove\"><img id=\"delete\" src=\"Images/cross.png\" /></a></td></tr>"); $(".remove").bind("click", function () { //删除文本框 $(this).parents("tr").remove(); }); } function btnValue() { var arr = []; var textNum = $("table thead tr").children("td").find("input").length; //循环获取文本框的值 for (var i = 0; i < textNum; i++) { var text = $("table thead tr").children("td").find("input").eq(i).val(); arr.push(text); } var json = JSON.stringify(arr); alert(json); } </script> </head> <body> <a class="insert" onclick="btnadd()"><img id="add" src="Images/event.png" /></a> <table> <thead> </thead> </table> <input type="button" value="获取值" onclick="btnValue()" /> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步