在页面开发中,操作HTML比较简单,Ajax获取表单中的内容,封装数据比较简单了,假设是JSON的,key值填写ID值,value值填写标签内容值,不需要重复的选择器去选择,需要注意的是ID值要和JAVA对象里面的属性值保持一致。前后代码变得非常简单。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //动态内容添加 $('#addTable').click(function(){ var value = '<div id="div">'+$('#div').html()+'</div>'; $('#div').after(value); }); //获取所有DIV中的所有INPUT和select标签对象 $('#addPro').click(function(){ $('body div[id=div]').each(function(){ $(":text,:selected",this).each(function(){ var id = $(this).attr('id'); var value = $(this).val(); var tagName = $(this).get(0).tagName; if(tagName=='INPUT'&&id!=undefined){ alert(id+":"+value); } if(tagName=='OPTION'){ //要获得select的ID ,就要取得 var key = $(this).html(); alert(key); } }); }); }); }); </script> </head> <body> <div id="div"> <table> <tr> <td>一个</td> </tr> <tr><td> <select id="ddd"> <option value="china">中国</option> <option value="us">美国</option> </select></td></tr> <tr><td> <input id="userID" type="text"/></td></tr> <tr><td> <input id="userID1" type="text"/></td></tr> </table> </div> <div> <input type="button" id="addTable" value ="增加表格" /> </div> <div> <input type="button" id="addPro" value ="提交数据表格" /> </div> </body> </html>
加下jquery插件。
太阳系 -http://blog.csdn.net/fellting