Javascript实现table隔行换色

表格行背景色JS设置
最新推荐文章于 2024-04-02 20:31:25 发布
转载 最新推荐文章于 2024-04-02 20:31:25 发布 · 2.4k 阅读 · 0

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var tb = document.getElementById("tb");
            var tbody = tb.getElementsByTagName("tbody")[0];
            var trs = tbody.getElementsByTagName("tr");
 
            for (var i = 0; i < trs.length; i++) {
                if (i % 2 == 0) {
                    trs[i].style.backgroundColor = "#888";
                }
            }
        };
    </script>
</head>
<body>
    <table id="tb">
        <tbody>
            <tr>
                <td>
                    第一行
                </td>
                <td>
                    第一行
                </td>
            </tr>
            <tr>
                <td>
                    第二行
                </td>
                <td>
                    第二行
                </td>
            </tr>
            <tr>
                <td>
                    第三行
                </td>
                <td>
                    第三行
                </td>
            </tr>
            <tr>
                <td>
                    第四行
                </td>
                <td>
                    第四行
                </td>
            </tr>
            <tr>
                <td>
                    第五行
                </td>
                <td>
                    第五行
                </td>
            </tr>
            <tr>
                <td>
                    第六行
                </td>
                <td>
                    第六行
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
复制代码
JavaScript 实现表格隔行变色
CodeWhizZ的博客
09-20 327
在网页开发中，经常会遇到需要对表格进行样式美化的情况。其中一种常见的需求就是实现表格的隔行变色效果，以提高表格的可读性和美观性。本文将介绍如何使用 JavaScript 实现表格的隔行变色效果。通过上述代码，我们成功地实现了表格的隔行变色效果。当浏览器加载并解析该文档时，JavaScript 代码会自动执行，从而实现表格的隔行变色效果。在上述代码中，我们通过判断行的索引是否为奇数来决定行的背景颜色。奇数行使用灰色背景，偶数行使用白色背景。接下来，我们可以使用 JavaScript 来实现隔行变色效果。
CSS2+JS实现table隔行变色
05-07
CSS2+JS实现table隔行变色,简单易懂，拿来改改就可以用
基于JavaScript实现表格隔行换色
11-21
表格隔行换色 需求分析 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 技术分析 table对象 集合 cells[]：返回包含表格中所有单元格的一个数组。 rows[]：返回包含表格中所有行的一个数组。 tBodies[]：返回包含表格中所有tbody 的一个数组。 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 代码实现 <!DOCTYPE html> <html lang="en">
Table隔行变色
weixin_30469895的博客
10-14 293
1.用JavaScript实现隔行变色 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.g...
table 隔行变色
weixin_34321977的博客
05-16 232
1 /*从第二行（偶数行）开始变色*/ 2 table tr：nth-child（2n）{ 3 background-color：red; 4 } 5 6 /*从第一行（奇数行）开始变色*/ 7 table tr：nth-child（2n-1）{ 8 background-color：red; 9 } 转载于:https://www.cnbl...
原生javascript实现隔行换色
10-24
总的来说，原生JavaScript实现隔行换色的关键在于理解DOM操作、条件语句以及事件处理。通过这种方式，我们可以为网页增加交互性和美观性，提升用户体验。同时，这也是一种很好的实践JavaScript基本技巧的机会，包括...
jQuery实现table隔行换色和鼠标经过变色的两种方法
10-25
首先，我们讨论如何实现table的隔行换色。隔行换色的效果是当页面加载完成后，表格中的奇数行和偶数行会显示不同的背景色，这样做可以增强表格的可读性，使得表格的行列更加容易区分。在jQuery中，有两种常用的方法...
js实现表格隔行换色
SqlloveSyn的博客
12-27 1118
js实现表格隔行换色
隔行换色table
day81219的博客
10-29 171
<style type="text/css"> table { margin: 0 auto; width: 600px; } table { border: 1px solid #000; } table tr...
table表格，隔行，格列变色
qq_40893035的博客
05-07 1207
隔行变色 每隔 奇数 行变色一次 tr:nth-child(odd) { background-color: #eee; } 每隔 偶数 行变色一次 tr:nth-child(even) { background-color: #eee; } 隔列变色 每隔 奇数 行变色一次 td:nth-child(odd) { background-color: #fff065; } 每隔 偶数 行变色一次 td:nth-child(even) { background-color: #fff
js练习案例——table表格隔行换色
xuan971130的博客
03-08 581
注意事项：设置鼠标移动和移出绑定事件。 设置好相应的类，修改时更好修改，避免修改js代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid...
前端-table表格隔行变色
热门推荐
qsloony的博客
05-21 2万+
table表格隔行变色 作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。 :nth-child(): 定义和用法 :nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后
JS实现表格跨行变色
最新发布
hexadecimal_001的博客
04-02 525
表格的跨行换色主要用到了JS的函数以及for循环，今天以表格的增加，删除，隔行换色来给大家演示一下。
使用js实现表格隔行变色
dxm809的博客
08-29 767
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = function(){ //1.获取表格 var tblEle = document.getElementById("tbl"); //2.获取表格中tbody里面的行数(长度) .
js实现表格隔行变色
zi_ran_meng的博客
05-19 569
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
JS表格隔行变色
qq_45387575的博客
02-20 561
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=..
js表格隔行变色
Vue1024的博客
01-05 782
js表格隔行变色
实现JavaScript隔行换色技巧
JavaScript隔行换色的技术实现涉及到多个方面的知识点，包括DOM操作、事件处理、循环语句、以及CSS操作等。下面将详细介绍这些知识点，以帮助理解如何用JavaScript代码实现一行一个颜色的隔行变色效果。 1. **文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值