在表格中隔行换色（js）

最新推荐文章于 2023-08-26 11:04:23 发布
原创 最新推荐文章于 2023-08-26 11:04:23 发布 · 515 阅读 · 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 308
在网页开发中，经常会遇到需要对表格进行样式美化的情况。其中一种常见的需求就是实现表格的隔行变色效果，以提高表格的可读性和美观性。本文将介绍如何使用 JavaScript 实现表格的隔行变色效果。通过上述代码，我们成功地实现了表格的隔行变色效果。当浏览器加载并解析该文档时，JavaScript 代码会自动执行，从而实现表格的隔行变色效果。在上述代码中，我们通过判断行的索引是否为奇数来决定行的背景颜色。奇数行使用灰色背景，偶数行使用白色背景。接下来，我们可以使用 JavaScript 来实现隔行变色效果。
js实现表格隔行换色
m0_61841946的博客
10-07 353
首先创建一个表格，用来看效果 <table border="1" cellspadding="0"> <tr> <td>表头</td> <td>表头</td> <td>表头</td> <td>表头</td> &
JavaScript表格的隔行换色
mqingo的博客
11-11 240
1. 确定事件: 文档加载完成 onload             2. 事件要触发函数: init()             3. 函数:操作页面的元素                     要操作表格中每一行                     动态的修改行的背景颜色 01表格隔行换色.html [标题行不换色] &lt;!DOCTYPE html&gt; &lt;html&g...
用JS完成对表格的隔行换色
BLUEHEART
12-11 490
JavaScript学习笔记
js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
weixin_33757911的博客
02-29 238
如果表格的数据比较多的话，表格颜色很单一看起来很不方便，看到一些网站将每行的颜色隔行改掉，很清晰。 其次如果表格的每行信息很多的话，一个不小心会看跑偏，所以在此为大家提供一个解决的办法，但鼠标放上去时，该行的颜色会变成独一无二的背景颜色。 这两种效果都是改变tr的className从而达到改变tr属性的效果。 效果图如下（选中的那行就是鼠标放上去的那行，由于截图较为垃圾，所以没有截到鼠标）：...
利用JS动态生成隔行换色HTML表格的两种方法
10-17
【JS动态生成隔行换色HTML表格】 在网页开发中，有时我们需要根据用户输入的数据动态创建HTML表格，并且为了提高视觉效果，我们通常会实现隔行换色的功能。本文将介绍两种JavaScript方法来实现这一目标。 ### 方法...
JS实现隔行换色的表格排序
10-20
在本文中，我们将探讨如何使用JavaScript实现一个功能丰富的表格，包括隔行换色和排序功能。首先，让我们逐个解析这个任务涉及的关键知识点。 1. **获取元素**：在JavaScript中，我们可以使用不同的方法来获取页面...
jquery实现表格隔行换色效果
10-23
在Web开发中，实现表格隔行换色是一个常见的页面美化功能，它不仅能够提高表格数据的可读性，还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...
Js 实现表格隔行换色一例
10-29
在网页中实现表格隔行换色是一种常见的增强用户阅读体验的方式，隔行换色可以使表格的数据对比更加清晰，同时让整个表格的视觉效果更佳。Js（JavaScript）是一种广泛用于网页开发的脚本语言，利用Js可以实现各种动态...
基于JavaScript实现表格隔行换色
11-21
在JavaScript中实现表格隔行换色，主要涉及到以下几个关键点： 1. **表格对象与属性**：HTML中的`<table>`元素在JavaScript中可以通过`document.getElementById()`方法获取到，这个对象提供了访问表格内部元素的...
表格渲染(悬浮变色,隔行换色,点击变色)
09-08
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
js实现隔行变色操作鼠标经过效果
03-24
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1099511
利用js实现代码的隔行换色
最新发布
a000515的博客
08-26 371
实现表格的隔行换色
js表格隔行换色
qq_42675691的博客
08-20 367
3.表格隔行换色 3.1 需求分析 ​ 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 3.2 技术分析 改变行的颜色 3.3 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 3.4 代码实现 ``...
使用JavaScript实现表格隔行换色
05-03 223
完整代码： 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 960
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
[c.y.j]js练习表格隔行 添加
caoyongjunjava的专栏
06-11 534
thead function getId(n){ return document.getElementById(n); } function lastId(){ return getId("table1").tBodies[0].rows.length+1; } function tableColor(){ var otable=getId("table1"); va
实现表格隔行换色与点击变色的简洁方法
在表格隔行换色中，常用的是`:nth-child`伪类选择器或`:nth-of-type`选择器来选择奇数或偶数行，并设置不同的背景色。对于点击变色，可以使用`:hover`伪类或JavaScript动态添加类。 ```css /* 隔行换色 */ tr:nth-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值