标准的动态添加,删除,全选,反选
<%-- 添加图书 --%>
<button class="addBtn">添加</button>
<button class="mulBtn">删除</button>
<%--<form>--%>
<table id="tab" border="1px" cellspacing="0" ailgn="center" width="80%">
<thead>
<td>全选:<input type="checkbox" name="index" id="allid"/>反选:<input type="checkbox" name="index" id="fanid"/></td>
<td>类别编号</td>
<td>标题</td>
<td>简介</td>
<td>作者</td>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="index" /></td>
<td><input type="text" name="cid" /></td>
<td><input type="text" name="title" /></td>
<td><input type="text" name="summary" /></td>
<td><input type="text" name="uploadUser" /></td>
</tr>
</tbody>
</table>
<button class="addEdoc">提交</button>
<%--</form>--%>
</body>
</html>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var i=0;
// 实现全选
$("#allid").click(function () {
if(i==0){
//把所有复选框选中
$("#tab td :checkbox").not("#fanid").prop("checked", true);
i=1;
}else{
$("#tab td :checkbox").not("#fanid").prop("checked", false);
i=0;
}
})
// 实现反转
$("#fanid").click(function () {
$("#tab td :checkbox").not("#allid").each(function(){
//遍历所有复选框,然后取值进行 !非操作
$(this).prop("checked", !$(this).prop("checked"));
})
})
// 添加按钮
$(".addBtn").click(function () {
var str = "<tr>\n" +
" <td><input type=\"checkbox\" name=\"index\"/></td>"+
" <td><input type=\"text\" name=\"cid\" /></td>\n" +
" <td><input type=\"text\" name=\"title\" /></td>\n" +
" <td><input type=\"text\" name=\"summary\" /></td>\n" +
" <td><input type=\"text\" name=\"uploadUser\" /></td>\n" +
"</tr> ";
$("tbody").append(str);
})
//删除按钮
$(".mulBtn").click(function () {
$("input[type=checkbox]").each(function () {
if($(this).is(":checked")){
// 自己是不能删除节点 必须通过父节点删除
$(this).parent().parent().remove();
}
})
})
// 批量添加操作
$(".addEdoc").click(function () {
var cids = new Array();
var titles = new Array();
var summarys = new Array();
var uploadUsers = new Array();
var i=0;
$("input[name=cid]").each(function () {
cids[i] = $(this).val();
i++;
})
i=0;
$("input[name=title]").each(function () {
titles[i] = $(this).val();
i++;
})
i=0;
$("input[name=summary]").each(function () {
summarys[i] = $(this).val();
i++;
})
i=0;
$("input[name=uploadUser]").each(function () {
uploadUsers[i] = $(this).val();
i++;
})
console.log(cids.length)
$.ajax({
type:"get",
data:{
"cids":JSON.stringify(cids)
,"titles":JSON.stringify(titles)
,"summarys":JSON.stringify(summarys)
,"uploadUsers":JSON.stringify(uploadUsers)
},
url:"http://localhost:8080/add",
success:function (data) {
alert("123")
}
})
})
})
</script>
可以插入多行,批量删除
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../plugin/layui/layui.js"></script>
<link rel="stylesheet" href="../../plugin/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="../../css/cma.css" />
</head>
<body>
<div>
<div style="margin-top:10px;margin-left:5px;float:left" >
<button class="layui-btn layui-btn-normal " id="saveProduct" type="button">保存</button>
</div>
<div style="margin-top:10px ;margin-left:5px;float:left">
<button class="layui-btn layui-btn-normal " id="addProduct" type="button">新增</button>
</div>
<div style="margin-top:10px;margin-left:5px;float:left">
<button class="layui-btn layui-btn-normal" id="deleteProduct" type="button">删除</button>
</div>
</div>
<hr>
<div class="addProduct" align="center">
<div class="addProIn">
<form class="layui-form">
<!-- border="1" cellpadding="2" cellspacing="0" -->
<table id="product" >
<tr height="50px" style="text-align:center">
<td width="5%"></td>
<td width="10%">产品名称</td>
<td width="10%">产品品牌 (商标)</td>
<td width="10%">产品类别</td>
<td width="10%">标准净含量</td>
<td width="10%">产品标准</td>
<td width="10%">生产地点</td>
<td width="10%">时间类型</td>
<td width="10%">时间</td>
<td width="10%">备注</td>
</tr>
<tr>
<td height="80%" style="text-align:center">
<input name="delete" type="checkbox" lay-skin="primary" value="01">
</td>
<td height="80%" style="padding:5px 5px">
<input name="title" class="layui-input title1" type="text" id="testtt"
width="100px" heigh="80px" name="title1" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px"><input name="title2" class="layui-input title2" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px"><input name="title3" class="layui-input title3" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px"><input name="title4" class="layui-input title4" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px"><input name="title5" class="layui-input title5" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px"><input name="title6" class="layui-input title6" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
<td style="padding:5px 5px">
<select name="modules" lay-search="" lay-verify="required"><option value="1">开始时间</option><option value="2">结束时间</option></select>
</td>
<td style="padding:5px 5px">
<input name="date" class="layui-input datetime" id="date" type="text" autocomplete="off" lay-verify="date">
</td>
<td style="padding:5px 5px"><input name="title" class="layui-input" type="text"
width="50px" autocomplete="off"
lay-verify="title"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
//增加
window.document.getElementById('addProduct').onclick = function (){
var tableobj =document.getElementById("product").lastChild;
var trobj =document.createElement("tr");
var tdobj=document.createElement("td");
tdobj.innerHTML='<input name="delete" type="checkbox" lay-skin="primary" value="">';
tdobj.style.textAlign="center";
trobj.appendChild(tdobj);
var j = 0;
var inputName = new Array("name1","name2","name3","name4","name5","name6","name7","name8","name9")
for(var i=0;i<9;i++)
{
if( i == 7){
var tdobj=document.createElement("td");
tdobj.style.padding="5px 5px";
tdobj.innerHTML='<input name="'+inputName[i]+'" class="layui-input datetime" type="text" autocomplete="off" lay-verify="date">';
trobj.appendChild(tdobj);
}else if( i == 6 ){
var tdobj=document.createElement("td");
tdobj.style.padding="5px 5px";
tdobj.innerHTML='<select name="'+inputName[i]+'" lay-search="" lay-verify="required"><option value="1">开始时间</option><option value="2">结束时间</option></select>';
trobj.appendChild(tdobj);
}else{
var tdobj=document.createElement("td");
tdobj.style.padding="5px 5px";
j=i+1;
tdobj.innerHTML='<input name="'+inputName[i]+'" class="layui-input title'+j+'" type="text" width="50px" autocomplete="off" lay-verify="title">';
trobj.appendChild(tdobj);
}
}
trobj.appendChild(tdobj);
tableobj.appendChild(trobj);
layui.use(['element','layer','laydate','form'], function(){
var laydate = layui.laydate,layer = layui.layer,element = layui.element,form=layui.form;
lay('.datetime').each(function(){
laydate.render({
elem: this
,trigger: 'click'
});
});
form.render("checkbox");
form.render("select");
});
}
layui.use(['element','layer','laydate','form'],function(){
var element = layui.element
,layer = layui.layer
,$ = layui.jquery
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
//删除tr
$("#deleteProduct").click(function(){
$("input[name='delete']:checked").each(function() {
n = $(this).parents("tr").index();
$("table#product").find("tr:eq("+n+")").remove();
});
});
})
</script>
</html>