在表格中隔行换色（js）

最新推荐文章于 2023-08-26 11:04:23 发布
原创 最新推荐文章于 2023-08-26 11:04:23 发布 · 516 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>隔行换色</title>
<script type="text/javascript">
 function test()
 {
 //根据标签得到<tr>
 var r=document.getElementsByTagName("tr");
  for(var i=0;i<r.length;i++)
  {
   //定义行数
   var j=i+1;
   //判断偶数行
   if(j%2==0)
   {//进行填充颜色
    r[i].style.backgroundColor="#0000FF";
   }else
   {
    r[i].style.backgroundColor="brown";
   }
  }
 }
</script>
 </head>
 <body onload="test()">
  <table border="1" id ="bianse">
   <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>地址</th>
    <th>成绩</th>
   </tr>
    <tr>
    <th>S001</th>
    <th>张三</th>
    <th>20</th>
    <th>重庆市</th>
    <th>90</th>
   </tr>
   <tr>
    <th>S002</th>
    <th>李四</th>
    <th>20</th>
    <th>重庆市</th>
    <th>90</th>
   </tr>
    <tr>
    <th>S003</th>
    <th>王五</th>
    <th>20</th>
    <th>重庆市</th>
    <th>90</th>
   </tr>
    <tr>
    <th>S003</th>
    <th>王五</th>
    <th>20</th>
    <th>重庆市</th>
    <th>90</th>
   </tr>
    <tr>
    <th>S003</th>
    <th>王五</th>
    <th>20</th>
    <th>重庆市</th>
    <th>90</th>
   </tr>
  </table>
 </body>
</html>
JavaScript 实现表格隔行变色
CodeWhizZ的博客
09-20 309
在网页开发中，经常会遇到需要对表格进行样式美化的情况。其中一种常见的需求就是实现表格的隔行变色效果，以提高表格的可读性和美观性。本文将介绍如何使用 JavaScript 实现表格的隔行变色效果。通过上述代码，我们成功地实现了表格的隔行变色效果。当浏览器加载并解析该文档时，JavaScript 代码会自动执行，从而实现表格的隔行变色效果。在上述代码中，我们通过判断行的索引是否为奇数来决定行的背景颜色。奇数行使用灰色背景，偶数行使用白色背景。接下来，我们可以使用 JavaScript 来实现隔行变色效果。
如何使用CSS实现表格的隔行变色效果？
最新发布
alankuo的专栏
11-01 1170
这种方法相对来说比较繁琐，因为需要手动为每行添加类名，但在某些特定情况下可能会用到，比如需要更精细地控制哪些行变色，哪些行不变色时。这种方法在一些需要根据特定条件动态改变表格隔行变色效果的情况下比较有用，比如根据用户的操作或数据的变化来调整隔行变色的规则。伪类可以根据元素在其父元素中的位置来选择元素。对于表格的隔行变色，我们可以选择奇数行或偶数行来设置不同的背景色。这种方法需要在HTML中手动为表格的行添加类名，然后通过CSS类名来设置不同的背景色。伪类的方法是最简单且最常用的实现表格隔行变色效果的方式。
js实现表格隔行换色
m0_61841946的博客
10-07 353
首先创建一个表格，用来看效果 <table border="1" cellspadding="0"> <tr> <td>表头</td> <td>表头</td> <td>表头</td> <td>表头</td> &
Js 实现表格隔行换色一例
01-19
Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:#f7f7f7;} 软件开发网欢迎你 2006年 2007年 2008年 2009年
表格渲染(悬浮变色,隔行换色,点击变色)
09-08
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
js实现隔行变色操作鼠标经过效果
03-24
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1099511
利用JS动态生成隔行换色HTML表格的两种方法
10-17
【JS动态生成隔行换色HTML表格】 在网页开发中，有时我们需要根据用户输入的数据动态创建HTML表格，并且为了提高视觉效果，我们通常会实现隔行换色的功能。本文将介绍两种JavaScript方法来实现这一目标。 ### 方法...
JS实现隔行换色的表格排序
10-20
在本文中，我们将探讨如何使用JavaScript实现一个功能丰富的表格，包括隔行换色和排序功能。首先，让我们逐个解析这个任务涉及的关键知识点。 1. **获取元素**：在JavaScript中，我们可以使用不同的方法来获取页面...
jquery实现表格隔行换色效果
10-23
在Web开发中，实现表格隔行换色是一个常见的页面美化功能，它不仅能够提高表格数据的可读性，还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...
基于JavaScript实现表格隔行换色
11-21
在JavaScript中实现表格隔行换色，主要涉及到以下几个关键点： 1. **表格对象与属性**：HTML中的`<table>`元素在JavaScript中可以通过`document.getElementById()`方法获取到，这个对象提供了访问表格内部元素的...
JavaScript表格的隔行换色
mqingo的博客
11-11 241
1. 确定事件: 文档加载完成 onload             2. 事件要触发函数: init()             3. 函数:操作页面的元素                     要操作表格中每一行                     动态的修改行的背景颜色 01表格隔行换色.html [标题行不换色] &lt;!DOCTYPE html&gt; &lt;html&g...
用JS完成对表格的隔行换色
BLUEHEART
12-11 491
JavaScript学习笔记
js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
weixin_33757911的博客
02-29 239
如果表格的数据比较多的话，表格颜色很单一看起来很不方便，看到一些网站将每行的颜色隔行改掉，很清晰。 其次如果表格的每行信息很多的话，一个不小心会看跑偏，所以在此为大家提供一个解决的办法，但鼠标放上去时，该行的颜色会变成独一无二的背景颜色。 这两种效果都是改变tr的className从而达到改变tr属性的效果。 效果图如下（选中的那行就是鼠标放上去的那行，由于截图较为垃圾，所以没有截到鼠标）：...
利用js实现代码的隔行换色
a000515的博客
08-26 374
实现表格的隔行换色
js表格隔行换色
qq_42675691的博客
08-20 368
3.表格隔行换色 3.1 需求分析 ​ 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 3.2 技术分析 改变行的颜色 3.3 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 3.4 代码实现 ``...
使用JavaScript实现表格隔行换色
05-03 224
完整代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS实现表单隔行换色</title> 7 8 <sc...
JS实现隔行换色
m0_71966801的博客
07-07 961
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
实现表格隔行换色与点击变色的简洁方法
在表格隔行换色中，常用的是`:nth-child`伪类选择器或`:nth-of-type`选择器来选择奇数或偶数行，并设置不同的背景色。对于点击变色，可以使用`:hover`伪类或JavaScript动态添加类。 ```css /* 隔行换色 */ tr:nth-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值