jquery 设置表格奇偶数的颜色和行被选中的颜色样式
jquery 代码
$(funtion(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou");//为奇数行设置样式(添加样式类)
$("tbody>tr:even").addClass("dan");//为偶数行设置样式类
$("tbody>tr:has(:checked)").addClass("ed"); //判断行是否被选中(返回布尔类型)添加样式类 // has(:checked)") 返回一个bool值 true/false// 搜索被选中 has(:checked)
$('tbody>tr').click(function(){
varhased=$(this).hasClass('ed');
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}
else
{
$(this).addClass("ed").find(":input").attr("checked",true);
}}); // 遍历指定触发函数
})
css 代码：
<style type="text/css">
table{border:0;border-collapse:collapse;}
td{font:normal12px/17pxArial;padding:2px;width:100px;}
th{font:bold12px/17px
Arial;text-align:left;padding:4px;border-bottom:1pxsolid#333;}
.dan{background:#FC0}
.ou{background:#FFF}
.ed{background:#669;color:#fff;}
</style>HTML 代码
<body>
<table>
<thead>
<tr><th></th><th>标题</th><th>时间</th><th>地点</th></tr>
</thead>
<tbody>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏1</td><td>2011</td><td>上海</td>
</tr>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏2</td><td>2012</td><td>杭州</td>
</tr>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏3</td><td>2011</td><td>济南</td>
</tr>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏4</td><td>2012</td><td>北京</td>
</tr>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏5</td><td>2011</td><td>武汉</td>
</tr>
<tr>
<td><inputtype="checkbox"name="choice"value=""></td>
<td>php100视屏6</td><td>2012</td><td>福州</td>
</tr>
</tbody>
</table>
</body>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...