<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>
<table>
<thead>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>学历</th>
<th>增加</th>
<th>移除</th>
</thead>
<tbody id="data1">
<tr>
<td><input type="text" name="empId"></td>
<td><input type="text" name="empName"></td>
<td>
<select name="empSex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td>
<select name="eduEducation">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</td>
<td><input type="button" onclick="addElement(this);" value="+"></td>
<td><input type="button" value="-" onclick="delElement(this)"></td>
</tr>
</tbody>
</table>
<p><input type="button" id="btn_add" value="批量添加"></p>
</body>
<script>
//批量添加
$("#btn_add").click(function () {
var data=[];
//循环tbody里面所有的tr，并取出每行相对的值,填充到数组中
$("#data1 tr").each(function (index,obj) {
data.push({
empId:$("input[name='empId']",obj).val(),
empName:$("input[name='empName']",obj).val(),
empSexual:$("select[name='empSexual'] option:selected",obj).val(),
eduEducation:$("select[name='eduEducation'] option:selected",obj).val()
})
})
//发起post请求
$.post({
url:"",
contentType:"application/json",
data:JSON.stringify(data),//将对象转为字符
success:function (text) {
alert(text.msg);
}
});
})
//复制tr节点的内容
function addElement(x){
$(x).parents("tr").clone().appendTo($("#data1"));
}
//移除tr节点
function delElement(x){
$(x).parents("tr").remove();
}
</script>
</html>
标签：function,obj,name,val,示例,spring,tr,MVC,data From： https://blog.51cto.com/u_16478619/9003133