Table tr 的隔行变色
<style type="text/css">
table{border-collapse:collapse;border:1px solid #999;}
td{border:1px solid #999;}
#table tr.color1{
background-color:#fafafa;
}
#table tr.color2{
background-color:#f7fbfe;
}
</style>
<script type="text/javascript">
var tableid='table';
var overcolor='#EEEEEE';
var color1='#FFFFFF';
var color2='#F8F8F8';
var tablename=document.getElementByIdx_x_x(tableid)
var tr=tablename.getElementsByTagName_r("tr")
for(var i=1;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.background=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){ //获取当前行的索引
this.style.background=color1;
}else{
this.style.background=color2;
}
}
if(i%2==0){
tr[i].className='color1';
}else{
tr[i].className='color2';
}
}
}
window.onload=showtable;
</script>
首先是: i/2==0判断是否是偶数
==================================================
jquery 判断
<script type="text/javascript">
$(document).ready(function(){
$(".table tr:even").addClass("alt");
$(".table tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}).click(function(){ //移除该行的class
$(this).toggleClass("click").removeClass("alt")})
});
</script>
执行点击时:切换颜色.并且移除原有的背景色。
=======================方法1==============
//test
$(".test tr:even").addClass('odd');
$(".test tr").hover(function(){$(this).addClass('highlight')},function(){$(this).removeClass('highlight')});
//click
$(".test tr").click(function(){
$(this).toggleClass('selected');
})
==============方法2(推荐)===============
$(".test tr:even").addClass('odd');
$(".test tr").hover(function(){$(this).addClass('highlight')},function(){$(this).removeClass('highlight')});
//默认选中添加样式
$(this).find("input[type=checkbox]:checked").parents('tr').addClass('selected');
//click
$(".test tr").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).find("input[type=checkbox]").removeAttr('checked');
}else{
$(this).addClass('selected');
$(this).find("input[type=checkbox]").attr("checked",true);
}
})
参考:http://www.codefans.net/jscss/code/2542.shtml
Table tr 的隔行变色的更多相关文章
- (转)适用微信小程序的table表格(带隔行变色)
原文地址 table.wxml <view class="table"> <view class="tr bg-w"> <view ...
- 表格(Table)隔行变色
在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- css 实现table 隔行变色
<html> <head> <title>Member List</title> <style> <!-- .datalist{ bo ...
- 关于table的td和ul元素li隔行变色的功能实现
table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{ background-color:颜 ...
- 隔行变色---简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- 【丛林】HTML Table 表格浅谈(边框、隔行变色
此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...
- table隔行变色
table tr:nth-child(2n) { background: #EEF8F0; } table tr:nth-child(2n+1) { b ...
- jquery table的隔行变色 鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...
随机推荐
- 输入url后发生了什么
(1)浏览器解析 (2)查询缓存 (3)DNS查询 顺序如下,若其中一步成功直接进去建立连接部分: -- 浏览器自身DNS -- 操作系统DNS -- 本地hosts文件 -- 像域名服务器发送请求 ...
- ThreadLocal 的分析
http://blog.csdn.net/LHQJ1992/article/details/52451136 个人感觉这是所有关于ThreadLocal里中最靠谱的一篇文章. ps:其实官方文档才是最 ...
- 图论trainning-part-1 E. Invitation Cards
E. Invitation Cards Time Limit: 8000ms Memory Limit: 262144KB 64-bit integer IO format: %lld Ja ...
- Leetcode 400.第n个数
第n个数 在无限的整数序列 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...中找到第 n 个数字. 为整形范围内 ( n < 231). 示例 1: 输入: 3 输出 ...
- BZOJ 3227 [Sdoi2008]红黑树(tree) ——贪心 动态规划
首先可以想到一个贪心的方法,然后一层一层的合并. 也可以采用动态规划的方式,为了写起来好写,把点数*2+1,然后发现在本机上跑不过1500的数据. 交上去居然A掉了. 贪心 #include < ...
- 【基础操作】FFT / DWT / NTT / FWT 详解
1. 2. 点值表示法 假设两个多项式相乘后得到的多项式 的次数(最高次项的幂数)为 $n$.(这个很好求,两个多项式的最高次项的幂数相加就得到了) 对于每个点,要用 $O(n)$ 的时间 把 $x$ ...
- django 和 mongdb 写一个简陋的网址,以及用django内置的分页功能
https://github.com/factsbenchmarks/simple_websit_about_58 一 设置 数据库的设置 在settings文件中加入这样一段代码: from mon ...
- 大数(bzoj 4542)
/* 想了半天莫队,不知道咋转移,需要动下脑子. 有一个很显然的结论是如果(l,r)是P的倍数,那么s[l...n]%P=s[r+1...n]%P. 根据这个东西,我们预处理出所有的后缀%P的余数,接 ...
- 理解 Nova 架构
Compute Service Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源. OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nov ...
- CKeditor如何实现图片上传功能
http://makaiyuan.blog.51cto.com/5819595/1049521 如何在数据库中导入excel文件内的数据:http://jingyan.baidu.com/album/ ...