table显示n条记录，每3行换一次颜色

最新推荐文章于 2021-03-10 11:50:39 发布
最新推荐文章于 2021-03-10 11:50:39 发布
阅读量1.3k 收藏
点赞数
分类专栏： web前端 文章标签： table function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangweixinda/article/details/7052589
版权

有时候 我们会遇到对table的行显示不同背景色的问题，对于每行换一次颜色和每两行和三行换一个颜色的处理方式都是类似的，下面就说一下每3行换一次颜色的方法。

<body>

<tableid="tbl">

    <tr><td>1</td></tr>

    <tr><td>2</td></tr>

    <tr><td>3</td></tr>

    <tr><td>4</td></tr>

    <tr><td>5</td></tr>

    <tr><td>6</td></tr>

    <tr><td>7</td></tr>

    <tr><td>8</td></tr>

    <tr><td>9</td></tr>

    <tr><td>10</td></tr>

</table>

</body>

<scripttype="text/javascript">

    window.οnlοad=function()

           {

                    var tbl =document.getElementById("tbl");

                    rows =tbl.getElementsByTagName("tr");

                    for(i=0;i<rows.length;i++)

                    {

                             var j =parseInt(i/3);

                             if(j%2==0)rows[i].style.backgroundColor="#f00";

                             else  rows[i].style.backgroundColor="#0f0";

                    }

           }

</script>

 

这样显示的效果就是3行红色，3行绿色，交替。
编程小菜菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
显示 N 维数据表（带颜色突出显示）：N 维数据表清晰显示，条目颜色突出显示。-matlab开发
05-29
DisplayTable打印出节省空间的，清晰的N维数字数据表，其中包括： * 维度（行和列）标签和标题* 指定的单元格间距和精度*通过指定输出排列以任何顺序显示尺寸！ * 使用 cprintf 函数（也在 Matlab Central 上）突出...
lua代码-树型打印一个 table
07-14
要实现树型打印 `table`，我们需要递归地遍历 `table` 的每一个元素。主要思路是检查每个元素是否是 `table`，如果是，则继续递归；如果不是，则打印其值。以下是一个基本的实现示例： ```lua function printTable...
table显示n条记录，每三行换一次颜色，即1,2,3用红色字体，4,5,6用绿色字体，7,8,9用红色字体
qq_33375680的博客
10-10 1698
window.onload=function() { var tbl = document.getElementById("tbl"); //首先获取表格 var rows = tbl.getElementsByTagName("tr"); //获取行 for(i=0;i<rows.le
用table显示n条记录，每三条换一下颜色
Studying . Working . A better life!
10-05 1930
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat
table 显示 n行记录,每3行换一次颜色
默翁的博客
04-08 358
&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="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
js控制表格颜色
贾世鑫的博客
10-08 4063
题目：用js控制表格颜色，每三行换一次颜色 代码： 表格 1 2 3 4 5 6 7 8 9 10 window.onload=function(){ var tbl = document.getElementById("tbl"); rows = tbl.getElementsByTagName("tr"); for(i=0;i<r
面试题：用table显示n条记录，样式要求，每隔三行换一种颜色
GS2016的博客
04-20 777
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="" cellspa
用C语言Linux下打印带颜色的字符串
02-05
**`color_table.png` 图片**：这张图片可能是颜色转义码的一个参考表，展示了不同颜色及其对应的转义码，帮助开发者更直观地了解如何设置颜色。 **`带颜色打印.txt` 文档**：这个文档可能包含了一些示例，展示了...
seali0n.github.io
03-11
`<table>`、`<tr>`、`<th>`和`<td>`用于创建表格，分别代表表格、行、表头单元格和数据单元格。 5. **样式控制**：虽然HTML主要用于结构，但也可以使用`<style>`元素或`<link>`引入外部CSS（Cascading Style Sheets...
最新Dreamweaver试题(一)带详细答案.docx
06-02
9. **历史记录面板**：Dreamweaver的历史记录面板能记录最多100条编辑历史，方便回溯和恢复。 10. **表格操作**：表格是网页布局的重要组成部分，由行（tr）、列（td）和表格（table）组成。表格属性设置中，间距指...
java Html&JavaScript面试题：用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。...
weixin_33722405的博客
01-30 97
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>JavaScript <body> <table id="...
用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。...
weixin_30699465的博客
10-27 65
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> wi...
Html+Css+Js_之table每隔3行显示不同的两种颜色
王燕欣的博客
04-26 4115
/**             最近因项目的需求，有这样的一个问题：                 一个table显示n条记录，每3行换一次颜色，例如：1，2，3行红色背景，4，5，6行绿色背景，7，8，9行红色背景...以此类推！         */         window.onload=function() {                  var tbl = docu
用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。
08-18 7843
window.onload=function() { var tbl = document.getElementById("tbl"); var rows = tbl.getElementsByTagName("tr"); for(i=0;i<rows.length;i++) {
php输出table表格奇偶行不同颜色,利用jQuery完成表格的增加删除和修改及设置奇偶行颜色...
weixin_39653766的博客
03-10 381
最近一周在学了一点点HTML, CSS, javascript，用javascript的jquery完成了一个简单的表格操作，有增加、删除和修改功能。表格分三列，第一列是学生编号(ID号)，第二列是学生姓名，第三列为学生年龄。在姓名和年龄框内输入数据，再点“Add”就可以增加数据(ID号会自动递增的生成)，输入ID号再输入新的姓名和年龄点“Edit”就可以修改，删除的话输入ID号就点“Delete...
面试题-在HTML中每隔3行改变一次颜色
...
04-14 1449
window.onload = function(){   var tab = document.getElementById("tb");   var trs = tab.getElementsByTagName("tr");   for(var i = 0; i    var j = parseInt(i/3);    if(j%2 == 0)     trs[i].style.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值