验证中...
别急的look
Raw Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
.fromBean{
/*默认有数据时为灰色背景,不可编辑*/
background: #eee;
}
</style>
</head>
<body>
<br>
<form action="">
<table class="table" border="1">
<thead>
<tr>
<th><input id="checkAll" type="checkbox"/></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:choose>
<c:when test=${!empty userList}>
<c:forEach items="${userList}" var="user">
<tr>
<td><input class="checkSingle" type="checkbox"/></td>
<td class="td"></td>
<input type="hidden" name="user.id" value="${user.id}" />
<td><input class="fromBean" type="text" readonly="true" name="${user.name}" value="user.name"></td>
<td><input class="fromBean" type="text" readonly="true" name="${user.age}" value="user.age"></td>
<td><input class="fromBean" type="text" readonly="true" name="${user.sex}" value="user.sex"></td>
<td><a class="editSingle">编辑</a>&nbsp;<a class="delSingle">删除</a></td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<!--<tr id="nodata">
<td colspan="5">没有数据,请添加!!!</td>
</tr>-->
</c:otherwise>
</c:choose>
</tbody>
</table>
</form>
<button onclick="add()">增加行</button>
<button onclick="del()">删除行</button>
<button onclick="sub()">提交</button>
<script type="text/javascript">
updateNo();
/**
* 全选与反选
* @param {Object} obj
*/
$("#checkAll").click(function(){
if($(this).is(':checked')){
// 全选
$(".checkSingle").each(function(){
//$(this).attr('checked',true);// 此种方法第二次就失效
$(this).get(0).checked=true;// 转换为dom对象
})
}else{
// 反选
$(".checkSingle").each(function(){
//$(this).attr('checked',false);
$(this).get(0).checked=false;
})
}
});
/**
* 添加行
*/
function add(){
var new_Add_tr;
// 如果字段较多,此处可写一个循环,也可直接从后台获取
var checkField = "<td><input class='checkSingle' type='checkbox' /></td>";
var No = "<td class='td'></td>";
var field1 = "<td><input type='text' name='user.name'></td>";
var field2 = "<td><input type='text' name='user.age'></td>";
var field3 = "<td><input type='text' name='user.sex'></td>";
var operate = "<td><a class='editSingle'>编辑</a>&nbsp;<a class='delSingle'>删除</a></td>"
new_Add_tr = "<tr>"+checkField+No+field1+field2+field3+operate+"</tr>";
$(".table").append(new_Add_tr);
updateNo();
/*var $td = $("table tr:last").clone();//增加一行,克隆一个对象
$(".table").append($td);
$("table tr:last").find(":input").val('');//将尾行元素克隆来的保存的值清空
$("table tr:last").find(":checkbox").attr('checked',false);*/
}
/**
* 批量删除删除
*/
function del(){
var i = 0;
$(".checkSingle").each(function(){
if($(this).is(':checked')){
i ++;
}
})
if(i>0){
if(confirm("确定删除"+i+"条数据?")){
$(".checkSingle:checked").parents("tr").remove();
}
updateNo();
}else{
if(confirm("默认删除最后一行?")){
$("table tr:last").remove();//移除最后一行(保留前两行:not(:first):not(:first))
}
}
}
/**
* 编辑
* @param {Object} i
*/
function editSingle(i){
// 移出不可编辑,去掉灰色背景
$("#no_"+i).nextAll().find(":text").removeAttr("readonly").css("background","none");
}
/**
* 删除单条
* @param {Object} i
*/
function delSingle(i){
if(confirm("确认删除这条数据?")){
$("#no_"+i).parents("tr").remove();
updateNo();
}
}
/**
* 提交数据到后台
* 1.id为空的-->新增
* 2.id不为空的-->更新
* 3.与数据库中的数据id进行比较,数据库有而表单没有的则删除
*/
function sub(){
$("form").submit();
}
/**
* 执行增删行后重新更新序号1,2,3......
*/
function updateNo(){
// 更新序号
$(".td").each(function(i){
$(this).html(i+1);
})
$(".td").each(function(i){
$(this).attr("id","no_"+(i+1));
})
// 更新编辑方法的href
$(".editSingle").each(function(i){
$(this).attr("href","javascript:editSingle("+(i+1)+")");
})
// 更新删除单条方法的href
$(".delSingle").each(function(i){
$(this).attr("href","javascript:delSingle("+(i+1)+")");
})
}
</script>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search