一个很简单的表格移入移出,选择效果,jquery做的。初学 效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery+html5+css3 动态时钟</title>
<style>
#dome{height:380px;width:550px;border:1px solid #ccc;}
#head{background:#F6AE38;height:25px;line-height:25px;text-align: center;border-radius: 5px 5px 0 0;margin:5px 5px 0 5px;}
#table2 table{width:540px;text-align: center;border:1px solid #ccc;background:#f0f0f0;margin:0 5px 0 5px;}
#table1{overflow: auto;height:280px;}
#table1 table{width:520px;text-align: center;border:1px solid #ccc;background:#f0f0f0;margin:5px;}
thead th{background:red;}
tr{border-bottom:1px solid #000;background:#ccc;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
var aInput=$("tr td input");
var aTr=$("tbody tr");
aInput.click(function(index){// 点击复选框效果
if($(this).attr("checked")=="checked"){
$(this).attr("checked",false);
aTr[index].css("background","#ccc");
}else{
$(this).attr("checked",true);
aTr[index].css("background","#F6AE38");
}
})
aTr.click(function(){ //点击选择效果
if($(this).find("input").attr("checked") == "checked"||aTr.attr("background")=="#F6AE38"){
$(this).find("input").attr("checked",false);
$(this).css("background","#ccc");
}else{
$(this).find("input").attr("checked",true);
$(this).css("background","#F6AE38");
}
})
aTr.hover(function(){ //移入移除效果
if( $(this).find("input").attr("checked") != "checked"){
$(this).css("background","#334666");
} },function(){
if( $(this).find("input").attr("checked") != "checked")
$(this).css("background","#ccc");
})
$("#choose input").click(function(){//全选
aInput.attr("checked",true);
aTr.css("background","#F6AE38");
})
})
</script>
</head>
<body>
<div id="dome">
<div id="head">标题</div>
<div id="table2">
<table>
<thead>
<tr><th style="width:80px;text-indent:-99999px">f </th><th style="width:35px;">id</th><th style="width:95px;">价格</th><th style="width:288px;">名字</th></tr>
</thead>
</table>
</div>
<div id="table1">
<table>
<tbody>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
<tr><td><input type="checkbox"/></td><td>2</td><td>678</td><td>fdfgdgdfg</td></tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div id="choose"><input type="button" value="全选"/></div>
</div>
</body>
</html>
。哈哈,慢慢的进步。