HTML对表格隔行变色-阿里云开发者社区

开发者社区> codingcoge> 正文

HTML对表格隔行变色

简介: js版: window.onload = function(){ //1.
+关注继续查看

js版:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            window.onload = function(){
                //1.获取表格
                var tblEle = document.getElementById("tb1");
                //2.获取表格中tbody里面的行数(长度)
                var len = tblEle.tBodies[0].rows.length;
                //alert(len);
                //3.对tbody里面的行进行遍历
                for(var i=0;i<len;i++){
                    if(i%2==0){
                        //4.对偶数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
                    }else{
                        //5.对奇数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tb1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小x</td>
                <td>120</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小z</td>
                <td>129</td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

jquery版:

<script>
            //1.页面加载
            $(function(){
                /*//2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").css("background-color","yellow");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").css("background-color","green");*/

                //2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").addClass("even");
                $("tbody tr:even").removeClass("even");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").addClass("odd");
            });
        </script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Html细线表格的实现 打印边框设置
在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。               1.1          1.2                    2.1          2.2      < table> 这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。
1202 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4477 0
支持10种格式的 HTML 表格导出 jQuery 插件
  HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 和 PDF 格式。
784 0
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图:     运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接中的option字符串。
886 0
HTML5中 HTML格式化/HTML样式/链表/表格-样式 韩俊强的博客
HTML5学习从简单到复杂,循环渐进! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 1.HTML格式化 Title 小韩哥博客更新了!hanjunqiang 欢迎来到小韩哥...
861 0
扩展HT for Web之HTML5表格组件的Renderer和Editor
在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑器 除了这几种常用编辑器之外,用户还可以通过继承ht.widget.BaseItemEditor类来实现自定义编辑器。
806 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3227 0
+关注
codingcoge
种一棵树最好的时间是十年前,其次是现在。 java自学后台ing,请多指教 Github: https://github.com/jjc123
152
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载