Article Detail

自动换整行颜色的CSS样式表格(需要用到JS)

function altRows(id){ if(document.getElementsByTagName){ var table = document.ge...

HTML 阅读 11.1万 3 分钟阅读 2015-10-15 12:23
GDScript3
79 行
<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
        if(document.getElementsByTagName){  
                
                var table = document.getElementById(id);  
                var rows = table.getElementsByTagName("tr"); 
                 
                for(i = 0; i < rows.length; i++){          
                        if(i % 2 == 0){
                                rows[i].className = "evenrowcolor";
                        }else{
                                rows[i].className = "oddrowcolor";
                        }      
                }
        }
}

window.onload=function(){
        altRows('alternatecolor');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #a9c6c9;
        border-collapse: collapse;
}
table.altrowstable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
}
table.altrowstable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
}
.oddrowcolor{
        background-color:#d4e3e5;
}
.evenrowcolor{
        background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
        <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
        <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
        <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
        <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
        <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
        <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
Comments 评论区
评论区 当前文章还没有公开评论
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件,或点上面的按钮上传 图片会自动插入 [img] 标签,其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称;reply 会生成一条带楼层回链的新评论,quote 会附带完整引用块,并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0107 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容,提交时仍会走当前页面的人机验证。

正在上传...
操作提示