1、问题描述，将一个table中的数据整个提交至后台转换成list
2、主要功能：
1)、表格数据json提交后台转成list，jsonObject
2)、后台list数据回显至前端表格，
3)、表格带增加行删除行功能，
4)、select元素回显
5)、jQuery ajax submit提交
3、前端提交表格数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form method="post" id="userFormID">
<table border="1" id="UserTableID">
<tr>
<td style="width:10%">序号</td>
<td style="width:10%">名字</td>
<td style="width:10%">年龄</td>
<td style="width:10%">性别</td>
<td style="width:10%">操作</td>
</tr>
<tr >
<td style="width:10%" number="1">1</td>
<td style="width:10%" nameTd="1"> <input type="text" value="张三" jsonName='name' onfocus="if (value =='请输入'){value =''}"onblur="if (value ==''){value='请输入'}"></td>
<td style="width:10%" ageTd="1"> <input type="text" value="22" jsonName='age' onfocus="if (value =='请输入'){value =''}"onblur="if (value ==''){value='请输入'}"></td>
<td style="width:10%" sexTd="1">
<select jsonName='sex'>
<option value="男" selected="selected">男</option>
<option value="女" >女</option>
</select>
</td>
<td style="width:10%" operTd="1">
<input type="button" value="delete" onclick="fnDeleteRow(this,'UserTableID')" style="float:left; margin-top:6px; margin-left:20%">
<input type="button" value="add" onclick="tbAddRow(this);" style="float:right; margin-top:6px; margin-right:20%">
</td>
</tr>
</table>
<input type="button" value="提交" onclick="submitUser()" style="float:right; margin-top:6px; margin-right:20%">
</form>
<input type="hidden" id="rootDir" value="${ctx}">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/saveuser.js"></script>
</body>
</html>
4、js部分代码
//得到表格数据
function getUser(tableID){
var args = {};
$("#"+tableID+" tr:gt(0)").each(function(i){
var data = new Object();
$(this).find("select[jsonName],input[jsonName]").each(function(){
var name = $(this).attr("jsonName");
data[name]= $(this).val();
});
args[i]=data;
});
alert("data;"+JSON.stringify(args));
return JSON.stringify(args);
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
String users = request.getParameter("user");
if (users!=null&&!"".equals(users)) {
JSONObject json=JSONObject.fromObject(users);
int size = json.size();
List<User> list= new ArrayList<User>();
for (int i = 0; i < size; i++) {
JSONObject o = (JSONObject) json.get(""+i);
User b = (User) JSONObject.toBean(o,User.class);
System.out.println(b.getName());
list.add(b);
}
}
}
6、代码下载地址 http://download.csdn.net/detail/u014520797/9425372
7、注意：demo 省去dao层，回显的数据是自定义的，与提交数据无关系
