js操作表格目的隔行换色

最新推荐文章于 2018-10-30 17:32:52 发布
最新推荐文章于 2018-10-30 17:32:52 发布
阅读量315 收藏
点赞数
分类专栏： js效果 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function()
		{
			var tables = document.getElementsByTagName("table");  //、此处不能用ID，CLASS替代！！！
			var odd, rows;
			for (var i = 0; i < tables.length; i++) 
			{
				odd = false;
				rows = tables[i].getElementsByTagName("tr");  //此处 注意
				for (var j = 0; j < rows.length; j++) 
				{
					if( odd == true)
					{
						rows[j].style.background = "cornflowerblue";
						odd = false;
					}
					else 
					{
						odd = true;
					}
				}
			}
			
			//
			var rowss = document.getElementsByTagName("tr");  //此处 注意
			
			for (var j = 0; j < rowss.length; j++) 
				{
					rowss[j].onmouseover = function()
					{
						this.style.fontWeight = "bold";
					}
					rowss[j].onmouseout = function()
					{
						this.style.fontWeight = "none";
					}
				}
		}
//		function bs ()
//		{
//				var tables = document.getElementsByTagName("table");
//				var rows;
//				rows = document.getElementsByTagName("tr");  //此处 注意
//				for (var j = 0; j < rows.length; j++) 
//				{
//					rows[j].onmouseover = function()
//					{
//						this.style.fontWeight = "bold";
//					}
//					rows[j].onmouseout = function()
//					{
//						this.style.fontWeight = "none";
//					}
//				}
//		}
</script>
	<style type="text/css">
		td{
			width: 200px;
		}
	</style>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0">
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
	</table>
</body>
</html>


li3196672779
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现表格隔行换色
m0_61841946的博客
10-07 299
首先创建一个表格，用来看效果 <table border="1" cellspadding="0"> <tr> <td>表头</td> <td>表头</td> <td>表头</td> <td>表头</td> &
js表格隔行换色
qq_42675691的博客
08-20 325
3.表格隔行换色 3.1 需求分析 ​ 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 3.2 技术分析 改变行的颜色 3.3 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 3.4 代码实现 ``...
JS 鼠标的移入与移开 实现表格换色（onmouseover onmouseout ）
qq_41566772的博客
10-30 681
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function changeColor(id,flag){ if(flag=="over&quot
js之表格隔行换色
chen_xingyao的博客
02-15 528
步骤分析： 第一步：确定事件(onload)并为其绑定一个函数 第二步：书写函数(获取表格) 第三步：获取tbody里面的行数 第四步：对tbody里面的行进行遍历 第五步：获取奇数行和偶数行(角标对2取余) 第六步：分别对奇数行和偶数行设置背景颜色 js代码： &lt;script type="text/javascript"&gt; //1.获取表格 ...
JavaScript第九章：何时该用DOM脚本设置样式
里脊的博客
10-15 182
   我们不应该利用DOM去创建重要的内容，也不应该利用DOM为文档设置重要的样式。 1.根据元素在节点树里的位置来设置样式     1）通过CSS声明样式的方式：           ①为标签元素统一地声明样式           ②为特定class属性的所有元素统一地声明样式           ③为有独一无二的id属性的元素单独声明样式     2）         CSS2引...
html中用js实现的表格隔行换色
周先森爱编程丶的博客
09-16 7233
写的时候把自己的表//写的时候把自己的表的table加上id="tbl" <table id="tbl">代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = fun
js实现表格隔行换色，jq实现表格隔行换色
tianzhen620的博客
05-08 1058
方式一：纯js语句，通过id属性实现表格隔行换色&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;&lt;/title&gt;        &lt;script&gt;            window.onloa
基于JavaScript实现表格隔行换色
10-15
为了解决这个问题，我们可以使用JavaScript来实现表格隔行换色的功能，从而提升用户的浏览体验。本文将详细介绍如何基于JavaScript实现这一功能。 首先，我们需要理解JavaScript中与表格相关的DOM对象和属性。在...
Js 实现表格隔行换色一例
10-29
Js实现表格隔行换色一例，这种效果网上已经有很多啦，每一种都有特色，请大家选择使用。
利用JS动态生成隔行换色HTML表格的两种方法
10-17
【JS动态生成隔行换色HTML表格】 在网页开发中，有时我们需要根据用户输入的数据动态创建HTML表格，并且为了提高视觉效果，我们通常会实现隔行换色的功能。本文将介绍两种JavaScript方法来实现这一目标。 ### 方法...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp39-cp39-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp311-cp311-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp311-cp311-musllinux_1_2_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
elementui数据表格隔行换色
04-28
在ElementUI的数据表格中，我们可以通过设置stripe属性来实现隔行换色的效果。具体操作如下： 1. 在模板中引入ElementUI的数据表格组件，并给它添加stripe属性。 2. 在数据表格中绑定data数据，即要展示的数据。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值