<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'table.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
.hover {
background: #bcd4ec;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<body>
<table class="table1">
<thead>
<th class="table1th1">全选<input id="qx" οnclick="aa()" type="checkbox"/></th>
<th>11</th>
<th>22</th>
<th>33</th>
<th>44</th>
</thead>
<tbody>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
aaaaaaa
</td>
<td>
vvvvvvv
</td>
<td>
ddddddd
</td>
<td>
cccccccc
</td>
</tr>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
dddddd
</td>
<td>
dddddd
</td>
<td>
ddwweeee
</td>
<td>
eeeeeee
</td>
</tr>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
eeeeeee
</td>
<td>
eeeeeee
</td>
<td>
eeeeeeeww
</td>
<td>
ggggggggg
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" value="添加" οnclick="add1()"/>
<input type="button" value="删除" οnclick="delete1()"/>
<input type="button" value="第一行后添加" οnclick="add2()"/>
</div>
<br>
</body>
</html>
<script>
var flag= $("#qx").attr("checked");
if(flag){
//取消
$(".table1 input[type='checkbox']").attr("checked",true);
}else{
$(".table1 input[type='checkbox']").attr("checked",false);
}
});
$(".table1 tbody tr").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover")
});
var check=$(this).children().first().children().first();
if($(this).children().first().children().first().attr("checked")){
$(this).children().first().children().first().attr("checked", false);
}else{
$(this).children().first().children().first().attr("checked", true);
}
});
//由于冲突,添加checkbox的点击事件
$("input[name='ck']").click(function(){
var check=$(this).attr("checked");
$(this).attr("checked",!check);
var tr=$(".table1 tr:eq(1)");
$(".table1 tbody").append(tr.clone());
$(".table1 tr:eq(1)").remove();
var tr=$(".table1 tr:eq(1)");
$(".table1 tr:eq(2)").after(tr.clone());
}
</script>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'table.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
.hover {
background: #bcd4ec;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<body>
<table class="table1">
<thead>
<th class="table1th1">全选<input id="qx" οnclick="aa()" type="checkbox"/></th>
<th>11</th>
<th>22</th>
<th>33</th>
<th>44</th>
</thead>
<tbody>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
aaaaaaa
</td>
<td>
vvvvvvv
</td>
<td>
ddddddd
</td>
<td>
cccccccc
</td>
</tr>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
dddddd
</td>
<td>
dddddd
</td>
<td>
ddwweeee
</td>
<td>
eeeeeee
</td>
</tr>
<tr>
<td class="table1check"><input name="ck" type="checkbox"/></td>
<td>
eeeeeee
</td>
<td>
eeeeeee
</td>
<td>
eeeeeeeww
</td>
<td>
ggggggggg
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" value="添加" οnclick="add1()"/>
<input type="button" value="删除" οnclick="delete1()"/>
<input type="button" value="第一行后添加" οnclick="add2()"/>
</div>
<br>
</body>
</html>
<script>
var flag =false;
//全选
var flag= $("#qx").attr("checked");
if(flag){
//取消
$(".table1 input[type='checkbox']").attr("checked",true);
}else{
$(".table1 input[type='checkbox']").attr("checked",false);
}
});
//单双行颜色不一样
$(".table1 tbody tr:even").css("background-color", "#ffc");
$(".table1 tbody tr").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover")
});
var sdf=false;
//1行任意位置点击,选中这行
var check=$(this).children().first().children().first();
if($(this).children().first().children().first().attr("checked")){
$(this).children().first().children().first().attr("checked", false);
}else{
$(this).children().first().children().first().attr("checked", true);
}
});
//由于冲突,添加checkbox的点击事件
$("input[name='ck']").click(function(){
var check=$(this).attr("checked");
$(this).attr("checked",!check);
})
//最后添加1行
var tr=$(".table1 tr:eq(1)");
$(".table1 tbody").append(tr.clone());
}
//删除制定的行
$(".table1 tr:eq(1)").remove();
}
//某行添加行
var tr=$(".table1 tr:eq(1)");
$(".table1 tr:eq(2)").after(tr.clone());
}
</script>