JavaScript实例---表格隔行变色以及移入鼠标高亮
时间:2022-05-07
本文章向大家介绍JavaScript实例---表格隔行变色以及移入鼠标高亮,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
#div1{width: 100px;height:100px;background: red;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementById('tab1');
var oldColor = '';
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover = function()
{
oldColor = this.style.background;
this.style.background = "green";
}
oTab.tBodies[0].rows[i].onmouseout = function()
{
this.style.background = oldColor;
}
if(i%2)
{
oTab.tBodies[0].rows[i].style.background = 'red';
}
else
{
oTab.tBodies[0].rows[i].style.background= " ";
}
}
}
</script>
</head>
<body>
<table border="1" width="300" id="tab1">
<thead>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>Lucy</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>Dan</td>
<td>26</td>
</tr>
<tr>
<td>4</td>
<td>Ben</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- windows解决SpringBoot启动时:APPLICATION FAILED TO START
- 【Git】:基础操作篇
- 低光照图像增强算法汇总
- 用Python解决女朋友看电影没字幕的需求
- 【Git】:基础协作篇
- 最近,我用pandas处理了一把大数据……
- 【编译技术】:AST——基础的基础
- 【编译技术】:Babel——基础的基础
- 【编译技术】:解读 Babel AST Format——01
- 【编译技术】:解读 Babel AST Format——02
- PyTorch入门笔记-PyTorch初见
- ssh 连接 Linux 服务器并安装 Anaconda
- Ant Design Vue 报错:Failed to resolve directive: ant-portal的解决办法
- 小程序生成二维码海报的组件-wxa-plugin-canvas
- kbone 是什么?这可能是最好的小程序开源框架