JS table布局显示奇数偶数行的颜色

最新推荐文章于 2024-07-23 14:33:49 发布
最新推荐文章于 2024-07-23 14:33:49 发布
阅读量4.7k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qhx556/article/details/8815236
版权

<!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>
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
//        $(function () {
        //            $('tr:even:not(#tr1)').css('background-color', '#eee');//选择所有偶数行，但不包括第一行(标题行)
//        })

        function upcolor() {
            var table = document.getElementById('mytable');
             for (var i = 0; i < table.rows.length; i++) {
                if (i % 2 != 0) {
                    table.rows[i].style.background='blue';
                }
            }

           /* var table = document.getElementById('mytable');
            for (var i = 2; i < table.rows.length; i = i + 2) {
                table.rows[i].setAttribute('style', 'background-color:blue')
            }*///巩腾辉语


        }
   
    </script>
</head>
<body οnlοad="upcolor();">
 <table id="mytable">
        <tr id="tr1">
            <th>
                出游时间
            </th>
            <th>
                出游地
            </th>
            <th>
                出游方式
            </th>
            <th>
                预计花费
            </th>
        </tr>
        <tr>
            <td>
                元旦
            </td>
            <td>
                三亚
            </td>
            <td>
                飞机
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td>
                春节
            </td>
            <td>
                泰国
            </td>
            <td>
                飞机
            </td>
            <td>
                2500
            </td>
        </tr>
        <tr>
            <td>
                清明
            </td>
            <td>
                大唐芙蓉园
            </td>
            <td>
                火车
            </td>
            <td>
                1500
            </td>
        </tr>
        <tr>
            <td>
                五一
            </td>
            <td>
                颐和园
            </td>
            <td>
                火车
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                端午
            </td>
            <td>
                周庄
            </td>
            <td>
                火车
            </td>
            <td>
                1000
            </td>
        </tr>
        <tr>
            <td>
                十一
            </td>
            <td>
                满城
            </td>
            <td>
                汽车
            </td>
            <td>
                30
            </td>
        </tr>
    </table>
</body>
</html>

心如止静
关注
原生js解决表格奇偶列显示
ChyoD1811的博客
01-15 361
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示 个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-...
table 奇数偶数行颜色
huuxuanhua_it的专栏
03-25 1136
javascript                       window.onload = function(){      var tr = document.all.test.getElementsByTagName("tr");   if(tr){    for(var i  =  0 ; i     tr[i].style.background=((i+1
js判断奇偶数
最新发布
admire_fish的博客
07-23 233
js判断奇偶数
求一段CSS样式代码；要求是Table的标签样式，实现Table标签奇数行显示一个颜色；偶数行显示另外一种颜色...
weixin_33816821的博客
01-30 181
 转载:http://zhidao.baidu.com/question/255951942.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="ht...
vue.js中v-if、v-else-if、v-else和v-show使用介绍
jolinoy的博客
06-14 505
vue.js中v-if、v-else-if、v-else和v-show使用介绍
给奇数的li标签添加蓝色，给偶数的li标签添加红色
09-01 573
今天遇到的面试题，哎，不看参考手册还是写的蛋疼啊！给奇数的li标签添加红色，给偶数的li标签添加蓝色 直接撸代码吧： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>给奇数的l...
样式表达式实现交替显示table行颜色
12-08
在网页设计中，为了提高可读性和用户...总之，通过CSS Expression 实现的交替显示行颜色在现代网页开发中已不常用，但了解其工作原理有助于理解前端技术的发展历程，并更好地利用现代CSS方法来提升网页性能和用户体验。
js处理表格对table进行修饰
10-25
接着，在JavaScript中，获取表格（table）的DOM节点，然后遍历所有行（rows），通过模运算（%）判断行号，奇数行添加`.one`类，偶数行添加`.two`类。最后，将`trcolor`函数绑定到`window.onload`事件，确保在页面...
用JQuery实现表格隔行变色和突出显示当前行的代码
10-28
作者使用了`:odd`和`:even`选择器来分别为奇数行和偶数行设置背景颜色。这是一种常见的方式，可以轻松实现隔行变色的效果。 ```javascript var color = "#ffeab3"; $(".data_listtr:odd td").css("background-color...
table 隔列(行)换色效果让表格结构更清淅
12-04
通常，我们会为偶数行和奇数行设置不同的背景色。以下是一个简单的CSS代码示例： ```css tr:nth-child(even) { background-color: #F1F1F1; /* 偶数行背景色 */ } tr:nth-child(odd) { background-color: #...
table 隔列换色JS效果.rar
07-05
这种技术通过JavaScript（JS）实现，可以使得表格的奇偶列显示不同的背景颜色，从而形成一种良好的视觉引导。本文将深入探讨如何使用JavaScript来实现这一效果，并提供相关知识点。 首先，我们需要了解HTML表格的...
表格奇偶行变色
zwj1030711290的CSDN
12-16 1490
表格的行间隔变色 有如下种方式 方式一:使用纯css table.dictionaryList tr:nth-child(2n+1){ background-color:#c0e0f7;}table.dictionaryList tr:nth-child(2n+0){ background-color:#defcfe;} 说明 :n从零开始:0,1,2,3....
点击表格列变色，让表格的偶数排变色，点击表格的行让其变色
看见小狮子没
07-14 889
点击任意一个单元格，会自动使该单元格所在位置的一竖列单元格变红。CSS、HTML代码一致。CSS、HTML代码如上。
element table基数行和偶数行做计算，改变不同阈值的文本颜色
weixin_40426459的博客
07-23 2279
效果图： 实现步骤： 1.第一个v-if：Accuracy、Coverage、Hit Rate三个模块与 Positive Gap、Negative Gap的计算方法不同 2.第二个v-if： 1>根据表格行的index下标做判断，将奇数行的数值置为灰色并添加百分号，添加一个em标签判断值为‘/’，‘ ’，‘NA’时，则不添加...
HTML-表格的奇数偶数行颜色不同
热门推荐
晴天下的大头娃娃
11-05 2万+
/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习 *作 者：张晴晴 *完成日期：201711月5日 *版 本 号：v1.0 * *问题描述：HTML5的新特性 *输入描述： 无 *程序输出： 无 */ 10-25 work body{ background-color:
JS中设置表格奇偶行不同颜色
小夜丶凝眸的博客
08-04 3314
$("#mytable tbody tr:even").css('background', "#AEEEEE");   $("#mytable tbody tr:odd").css('background', "#bbbbff"); 值得注意的是如果项目中里的内容如果是在js中动态拼接完成的，那么表格奇偶行颜色应该在拼接完成之后设置。
JS实现奇偶行变色
z-ying-jian的博客
01-20 1847
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="keywords" content=""&gt; &lt;meta name="description&q
table 选择奇数行，偶数行的方法
深渊的水影
06-25 4386
也是网上查到的，自己在此备份一下！ jquery:   $("tr:odd")   $("tr:even") css:       expression(parentElement.rowIndex%2==0?...);  
jquery选择器tr:even获取偶数行、tr:odd 获取奇数行
wzx735481897的博客
06-19 1万+
在jquery中： $('table tr:even')  -> 表示获取一个table 所有的索引为偶数的行， 其中索引index 从0开始算起， 0算偶数！ $('table tr:odd')  ->   表示获取一个table 所有的索引为奇数的行， 其中索引index 从0开始算起， 0算奇数！ Eg： 创建一个有6行数据的表格， 让奇数行的背景色为green，
如何设置element table的斑马纹奇数行和偶数行的背景颜色
06-08
可以通过 CSS 中的伪类选择器来设置 element table 的斑马纹效果，具体方法如下： ```css /* 偶数行背景颜色 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 奇数行背景颜色 */ tr:nth-child(odd) { background-color: #ffffff; } ``` 以上代码中，`tr:nth-child(even)` 表示选择表格中的偶数行，`tr:nth-child(odd)` 表示选择表格中的奇数行。通过设置不同的背景颜色，就可以实现表格的斑马纹效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值