Javascript控制表格隔行变色

最新推荐文章于 2022-02-20 19:43:13 发布
最新推荐文章于 2022-02-20 19:43:13 发布
阅读量368 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanloveyang/article/details/41549555
版权 
</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隔行变色</title>
	<style type="text/css">

		*{
			padding:0px;
			margin: 0x;
		}
		body{
			font-size: 14px;
			color: #666;
			font-family: microsoft yahei ;
		}

		#container{
			width: 88%;
			margin:0 auto;
			border:1px solid #EEE;
			min-height: 700px;
			border-radius: 4px;
		}

		table{
			width: 90%;
			margin: 0 auto ;
			height: auto;
			border:1px solid #999;
			border-collapse: collapse;
		}

		table tr{
			height: 25px;
			line-height: 25px;
		}

		table tr th{
			height: 38px;
			background: #DF1817;
			color: #FFF;
			font-size: 1.2em;
			border:1px solid #999;
			font-weight: 200;
			
		}

		table tr td{
			border:1px solid #999;
			padding: 3px;
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		window.onload = function ()
		{
			var divContainer = document.getElementById("container");
			var colla_table = document.getElementById("gehang");
			var colla_rows = colla_table.getElementsByTagName("tr");
			for (var i = 0; i < colla_rows.length; i++) {
				if(i%2==0)
				{
					colla_rows[i].style.background = "#EEE";
				}
			};
		}
	</script>
</head>
<body>
	<div id="container">
		<table id="gehang">
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
		</table>
	</div>
</body>
</html>


waterport
关注
专栏目录
JavaScript 实现表格隔行变色
CodeWhizZ的博客
09-20 273
在网页开发中，经常会遇到需要对表格进行样式美化的情况。其中一种常见的需求就是实现表格的隔行变色效果，以提高表格的可读性和美观性。本文将介绍如何使用 JavaScript 实现表格的隔行变色效果。通过上述代码，我们成功地实现了表格的隔行变色效果。当浏览器加载并解析该文档时，JavaScript 代码会自动执行，从而实现表格的隔行变色效果。在上述代码中，我们通过判断行的索引是否为奇数来决定行的背景颜色。奇数行使用灰色背景，偶数行使用白色背景。接下来，我们可以使用 JavaScript 来实现隔行变色效果。
js表格隔行变色
weixin_46670235的博客
03-13 1455
个人推荐vscode编写前端 功能强大 兼容性强 实现思路 构建好HTML框架 CSS修饰之后 将获取的tbody的tr定义为一个数组，通过for循环实现遍历，注册鼠标经过与离开事件，将trs[i]的背景颜色换掉，此处我是通过改变ClassName实现的，在CSS中写出对应更改的id属性，改为需要的背景色 *获取的trs不包括表头元素 代码如下：（如有问题，欢迎指正） <!DOCTYPE html> <html lang="en"> <head> &l.
CSS控制表格隔行变色与鼠标滑过变色
weixin_30674525的博客
09-23 260
（1）用expression 鼠标滑过变色： <style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td { onmouseover: expression(onmouseover=function (){this.style.borderColor =...
js控制表格隔行变色
weixin_34242331的博客
07-24 132
只是加载时候隔行变一个颜色，鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td>不变色</td> </tr> <tbody id="goaler"> <tr> <td>xx...
JS表格隔行变色
qq_45387575的博客
02-20 505
1、鼠标事件经过onmouseover,鼠标离开onmouseout 2、鼠标经过，当前行高亮，鼠标离开，当前行背景变灰 3、第一行不变。thead。tbody 注意必须使用this来指代才有效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=..
用JavaScript实现表格隔行变色
老熊专栏
06-24 1952
  不变色    xxxxxxxx   xxxxxxxx   xxxxxxxx   xxxxxxxx    不变色 var TbRow = document.getElementById("goaler");if (TbRow != null){ for (var i=0;i { if (TbRow.rows[i].rowIndex%2==1) { TbRow.rows[i].style.ba
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
JS控制表格隔行变色
01-19
<table u00a0width=”800″ border u201d0″ cellpadding=”0″ cellspacing>    <tr>        <td>不变色</td>    </tr>    <tbody u00a0id=”goaler”>    <tr>        <td>xxxxxxxx</td>    </tr>    <tr>        <td>xxxxxxxx</td>    </tr>    <tr>        <td>xxxxxxxx</td>    </tr>    <tr>        <td>xxxxxxxx</td>    </tr>    </tbod
javascript表格隔行变色加鼠标移入移出及点击效果的方法
12-11
本文主要探讨了如何使用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，以增强表格的可读性和用户的操作体验。 首先，隔行变色是一种常见的视觉分隔技巧，它有助于用户在查看大量数据时避免混淆行与行之间...
Javascript之表格隔行变色
weixin_30778805的博客
08-12 341
其实原理很简单，取到表格ID，获取表格内的<tbody>元素，然后在获取<tbody>元素下的所有<tr>元素。然后循环输出获取的<tr>元素。 对<tr>元素的索引值除2取余，为0者设置背景色。 HTML代码： <table id="tb"> <tbody> ...
使用javascript使特定的表格隔行变色
Min的博客
08-01 1302
特定的表格隔行变色 （1）根据表格的id获取表格。 （2）在表格内获取元素。 （3）在元素下获取元素。 （4）循环输出获取的元素。 （5）对元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。 javascript代码： var tb =document.getElementById("table");//获取id为table的元素
JavaScript表格的隔行换色
mqingo的博客
11-11 217
1. 确定事件: 文档加载完成 onload             2. 事件要触发函数: init()             3. 函数:操作页面的元素                     要操作表格中每一行                     动态的修改行的背景颜色 01表格隔行换色.html [标题行不换色] &lt;!DOCTYPE html&gt; &lt;html&g...
javascript实现table表格隔行变色的方法
12-11
总结起来，JavaScript实现表格隔行变色的关键在于使用`document.getElementById`和`getElementsByTagName`来选取需要操作的元素，以及使用循环和条件语句来动态地改变元素的样式。这种方法可以很好地提升表格的视觉...
JavaScript 表格隔行变色
快乐de馒头
07-05 447
1 1 2 2 2 2 2 2 var b=document.getElementsByTagName("table")[0]; var items=b.getElementsByTagName("tr"); alert(items);
JavaScript之使特定的表格隔行变色
夏小沫学习之路
07-28 1588
思路 1.依据表格id获取表格   使用方法 getElementById("元素id") 2.表格里获取元素  使用方法 getElementsByTagName("元素') 该方法返回的是标签名的对象的集合 3.在下获取元素  使用方法 getElementsByTagName("元素') 4.循环输出获取的元素   for循环输出 5.对元素的索引值除2取模，根据奇
JS控制table隔行变色
笨小孩
04-08 538
代表团 第四名 第五名 第六名 成都 99 86 43 61 15 24 北京 54 45 41
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值