<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.oddTr{
background-color: #fff;
}
.evenTr{
background-color: #efefef;
}
.curTr{
background-color: #0f0;
}
</style>
<script src="jQuery-min.js"" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
for(i=1;i<10;i++){
$("tbody").append("<tr><td><input type='checkbox' value='"+i+"' /></td><td>"+i+"</td><td>"+i*i+"</td></tr>")}
$("tbody tr:even").addClass("evenTr");
$("tbody tr:odd").addClass("oddTr");
$("tbody tr").each(function(){
$(this).hover(function(){
$(this).addClass("curTr");
})
$(this).mouseout(function(){
$(this).removeClass("curTr");
})
$(this).dblclick(function(){
alert($(this).find("td:eq(1)").text())
})
})
//设置按钮功能
$("#selectAll").click(function(){
$("tbody input[type='checkbox']").prop("checked","checked");
})
$("#selectNone").click(function(){
$("tbody input[type='checkbox']").prop("checked","");
})
$("#selectOpposite").click(function(){
$("tbody input[type='checkbox']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
})
//确定按钮获取所有勾选的复选框的值，并以英文逗号连接
$("#sbt").click(function (){
var valueStr="";
$("tbody input[type='checkbox']:checked").each(function (){
valueStr+=$(this).val()+","
})
valueStr=valueStr.substring(0,valueStr.length-1)
if(valueStr=="")
alert("你没有选择任何记录")
else
alert(valueStr)
})
}
)
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1px">
<thead>
<th>序号</th>
<th>1</th>
<th>2</th>
</thead>
<tbody>
</tbody>
</table>
<button id="selectAll">全选</button>
<button id="selectOpposite">反选</button>
<button id="selectNone">全不选</button>
<button id="sbt">确定</button>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.oddTr{
background-color: #fff;
}
.evenTr{
background-color: #efefef;
}
.curTr{
background-color: #0f0;
}
</style>
<script src="jQuery-min.js"" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
for(i=1;i<10;i++){
$("tbody").append("<tr><td><input type='checkbox' value='"+i+"' /></td><td>"+i+"</td><td>"+i*i+"</td></tr>")}
$("tbody tr:even").addClass("evenTr");
$("tbody tr:odd").addClass("oddTr");
$("tbody tr").each(function(){
$(this).hover(function(){
$(this).addClass("curTr");
})
$(this).mouseout(function(){
$(this).removeClass("curTr");
})
$(this).dblclick(function(){
alert($(this).find("td:eq(1)").text())
})
})
//设置按钮功能
$("#selectAll").click(function(){
$("tbody input[type='checkbox']").prop("checked","checked");
})
$("#selectNone").click(function(){
$("tbody input[type='checkbox']").prop("checked","");
})
$("#selectOpposite").click(function(){
$("tbody input[type='checkbox']").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
})
//确定按钮获取所有勾选的复选框的值，并以英文逗号连接
$("#sbt").click(function (){
var valueStr="";
$("tbody input[type='checkbox']:checked").each(function (){
valueStr+=$(this).val()+","
})
valueStr=valueStr.substring(0,valueStr.length-1)
if(valueStr=="")
alert("你没有选择任何记录")
else
alert(valueStr)
})
}
)
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1px">
<thead>
<th>序号</th>
<th>1</th>
<th>2</th>
</thead>
<tbody>
</tbody>
</table>
<button id="selectAll">全选</button>
<button id="selectOpposite">反选</button>
<button id="selectNone">全不选</button>
<button id="sbt">确定</button>
</body>
</html>