设计table表格，用js设计偶数行和奇数行显示不同的颜色
第一种：鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function changeOver(elementId){
//声明指定相关表元素
var table1 = document.getElementById("table1").children[0];
//for循环语句
for(var i=0;i<table1.children.length;i++){
//if判断语句
if(table1.children[i]==elementId){
//奇数行
if(i%2==1)
//当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色
elementId.style.background="red";
//偶数行
else
//当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色
elementId.style.background="green";
}
}
}
//当鼠标离开相关单元格时所触发的事件
function changeOut(elementId){
//当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色
elementId.style.background="#FFFFFF";
} </script>
<style type="text/css">
/*表格的样式*/
table{
width: 200px;
height: 400px;
border: 1px solid;
}
tr td{
width: 100px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<!--onmouseover鼠标经过时触发的函数，onmouseout鼠标离开时触发的函数-->
<table id="table1" >
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td >1</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>2</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>3</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>4</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>5</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>6</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>7</td>
</tr>
<tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
<td>8</td>
</tr> </table>
</body>
</html>
第二种：直接用css发生改变，使用了伪类选择器nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*奇数改变的颜色*/
tr:nth-child(odd){background-color:#FFE4C4;}
/*偶数改变的颜色*/
tr:nth-child(even){background-color:#F0F0F0;}
/*table样式*/
table{
width: 200px;
height: 400px;
border: 1px solid;
}
/*tr.td的样式*/
tr td{
width: 100px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<!--设计的一个简单表格-->
<table id="table1" >
<tr>
<td >1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr >
<td>6</td>
</tr>
<tr >
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr> </table>
</body>
</html>
设计table表格，用js设计偶数行和奇数行显示不同的颜色的更多相关文章
- EXCEL 偶数、奇数行分开求和公式
例举 : A1行是 123 A2行是 321 A3行是 456 A4行是 789我是加的是A1+A3得出的和还有加的是A2+A4得出的和因为要A1+A3一直加到A601,我用很笨的方式像这样子一个个加 ...
- 【shell脚本】显示文件的偶数或奇数行
# Dispaly the odd line. awk 'NR%2==1' file
- jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式
query 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou"); //为奇数行设 ...
- Table表格的一些操作
首先创建一个table表格: <input type="button" id="btn1" value="获取数据" /> &l ...
- linux命令（39）：shell 打印偶数行，奇数行 ,行号
awk 命令: 1. 打印行号和内容: awk '{print NR":"$0}' 2. 输出:偶数行和奇数行到文件 awk '{print $0.txt > NR%2.tx ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- [js开源组件开发]table表格组件
table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
随机推荐
- 【Selenium-WebDriver自学】Selenium-IDE调试（四）
==================================================================================================== ...
- 定位到行的快捷键iOS
1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...
- javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint 'javax.validation.constraints.Size' validating type 'java.util.Date'.
开始是 javax.validation.UnexpectedTypeException: No validator could be found for type: java.lang.Intege ...
- Django从MySQL数据库生成model
字段太多的话,手动建表,然后用 inspectdb 命令生成model文件,效率会高很多: inspectdb 表名 >> model文件名.py >> 是追加在文件末尾:& ...
- SVM标记学习
# -*- coding: utf-8 -*- """ Created on Mon Oct 1 09:32:37 2018 @author: ""& ...
- 06-padding(内边距)
padding padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充 ...
- Aop 基础
基础文献 https://blog.csdn.net/abcd898989/article/details/50809321 简单Demo配置 pom.xml <!-- AOP --> & ...
- c# Type.InvokeMember用法
函数原型: public object InvokeMember(string, BindingFlags, Binder, object, object[]);string:你所要调用的函数名Bin ...
- tips___代码规范
函数变量尽可能置于最小作用域内,并在变量声明时进行初始化 变量声明的位置最好离第一次使用的位置越近越好:应使用初始化的方式代替声明再赋值. int x=0; rather than int x; x ...
- c++复习：C++输入和输出流
C++输入和输出流 1.I/O流的概念和流类库的结构 程序的输入指的是从输入文件将数据传送给程序,程序的输出指的是从程序将数据传送给输出文件. C++输入输出包含以下三个方面的内容: 对系统指定的标准 ...