动态生成表格,批量添加再使用ajax提交后台
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="~/assets/js/jquery-1.10.2.min.js"></script>
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>
<style>
.usertable {
margin-top: 10px;
border: solid #addc90;
width: 670px;
border-width: 1px 0px 0px 1px; /*顺时针方向上右下左*/
}
.usertable td {
text-align: center;
border: solid #addc90;
border-width: 0px 1px 1px 0px; /*顺时针方向上右下左*/
}
.theader {
background-color: #addc90;
color: #eeeeee;
}
.usertable tr a {
color: blue;
text-decoration: none;
}
</style>
<script>
$(function () {
$(".usertable tr").find("a:first").click(function () {
$(this).parent().parent().remove();
})
//添加
$("#add").click(function () {
var needhtml = $("<tr name=\"cEM_plandata\"></tr>");
needhtml.append("<td><input tyte=\"checkbox\" id=\"headerchecked\"></td>");
needhtml.append("<td><input tyte=\"text\" name=\"Ename\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"Etype\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"Emodel\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"quantity\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"qunit\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"price\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"money\" ></td>");
needhtml.append("<td><input tyte=\"text\" name=\"oneremark\" id=\"oneremark\"></td>");
$(".usertable").append(needhtml);
})
$("#submit").click(function () {
var cEM_plandata = $("tr[name='cEM_plandata']");
var myarray = new Array();
for (var i = 0; i < cEM_plandata.length; i++) {
var jsonObj = {
"Ename": $(" input[ name='Ename' ]").eq(i).val(), "Etype": $(" input[ name='Etype' ]").eq(i).val(), "Emodel": $(" input[ name='Emodel' ]").eq(i).val(),
"quantity": $(" input[ name='quantity' ]").eq(i).val(),
"qunit": $(" input[ name='qunit' ]").eq(i).val(), "price": $(" input[ name='price' ]").eq(i).val(), "money": $(" input[ name='money' ]").eq(i).val(), "oneremark": $(" input[ name='oneremark' ]").eq(i).val()
}
myarray.push(jsonObj);
console.log(jsonObj);
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server" method="post">
<input type="button" id="add" value="批量添加" />
<input type="submit" id="submit" value="提交" />
<div>
<table class="usertable">
<tr class="theader">
<th>
<input type="checkbox" id="headerchecked" />
</th>
<th>序号</th>
<th>设备名称</th>
<th>设备类型</th>
<th>设备型号</th>
<th>设备数量</th>
<th>数量单位</th>
<th>计划单价</th>
<th>计划金额</th>
<th>备注</th>
</tr>
</table>
</div>
</form>
</body>
</html>
