本文介绍了一个使用jQuery实现的表格操作案例，包括隔行变色、点击行改变背景色及复选框状态等功能。通过简单的HTML结构和jQuery选择器实现了交互效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="gbk">
<head>
<title></title>
<style type="text/css">
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan { background:#FC0}
.ou { background:#FFF}
.ed { background:#669;color:#fff;}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tbody>tr:odd").addClass("ou");
$("tbody>tr:even").addClass("dan");
$('tbody>tr:has(:checked)').addClass('ed');
$('tbody>tr').click(function() {
var hased=$(this).hasClass('ed');
if(hased){
$(this).removeClass('ed').find(':checkbox').attr('checked',false);
}else{
$(this).addClass('ed').find(':checkbox').attr('checked',true);
}
});
})
</script>
</head>
<body>
<table>
<thead>
<tr><th> </th><th>标题</th><th>时间</th><th>地点</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>PHP100视频1</td><td>2011</td><td>上海</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频2</td><td>2012</td><td>杭州</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频3</td><td>2011</td><td>济南</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频4</td><td>2011</td><td>北京</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频5</td><td>2012</td><td>武汉</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频6</td><td>2011</td><td>福州</td></tr>
</tbody>
</table>
</body>
</html>
隔行变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="gbk">
<head>
<title></title>
<style type="text/css">
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan { background:#FC0}
.ou { background:#0FF}
.ed { background:#669;color:#fff;}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou");
$("tbody>tr:even").addClass("dan");
$("tbody>tr:has(:checked)").addClass("ed");
//搜索被选中 has(:checked)
$('tbody>tr').click(function(){
var hased=$(this).hasClass('ed');
$(this)[hased? "removeClass" : "addClass"]("ed")
.find(":input").attr("checked",!hased);
});
//遍历指定触发函数
})
</script>
</head>
<body>
<table>
<thead>
<tr><th> </th><th>标题</th><th>时间</th><th>地点</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="choice" value=""/></td>
<td>PHP100视频1</td><td>2011</td><td>上海</td></tr>
<tr><td><input type="checkbox" name="choice" value="" checked /></td>
<td>PHP100视频2</td><td>2012</td><td>杭州</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频3</td><td>2011</td><td>济南</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频4</td><td>2011</td><td>北京</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频5</td><td>2012</td><td>武汉</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频6</td><td>2011</td><td>福州</td></tr>
</tbody>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
