Html+Css+Js_之table每隔3行显示不同的两种颜色
来源:互联网 发布:白贺翔 java架构师 编辑:程序博客网 时间:2024/06/06 17:22
<html>
<head>
<script type="text/javascript">
/**
最近因项目的需求,有这样的一个问题:
一个table显示n条记录,每3行换一次颜色,例如:1,2,3行红色背景,4,5,6行绿色背景,7,8,9行红色背景...以此类推!
*/
window.onload=function() {
var tbl = document.getElementById("table"); // 先获取table
var rows = tbl.getElementsByTagName("tr"); // 获取里面的行tr
for(i=0;i<rows.length;i++) { // 遍历里面的行
var j = parseInt(i/3); // 以每3行为单位,j为:3次0,3次1,3次2 ...
if(j%2==0){ // 再通过取模来设置每隔3行显示不同的两种颜色
rows[i].style.backgroundColor="#f00";
}else{
rows[i].style.backgroundColor="#0f0";
}
}
};
</script>
</head>
<body>
<table id="table" border="1" width="500px">
<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>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
</table>
</body>
</html>
<head>
<script type="text/javascript">
/**
最近因项目的需求,有这样的一个问题:
一个table显示n条记录,每3行换一次颜色,例如:1,2,3行红色背景,4,5,6行绿色背景,7,8,9行红色背景...以此类推!
*/
window.onload=function() {
var tbl = document.getElementById("table"); // 先获取table
var rows = tbl.getElementsByTagName("tr"); // 获取里面的行tr
for(i=0;i<rows.length;i++) { // 遍历里面的行
var j = parseInt(i/3); // 以每3行为单位,j为:3次0,3次1,3次2 ...
if(j%2==0){ // 再通过取模来设置每隔3行显示不同的两种颜色
rows[i].style.backgroundColor="#f00";
}else{
rows[i].style.backgroundColor="#0f0";
}
}
};
</script>
</head>
<body>
<table id="table" border="1" width="500px">
<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>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
</table>
</body>
</html>
0 0
- Html+Css+Js_之table每隔3行显示不同的两种颜色
- TextView显示两种不同的字体颜色
- 鼠标覆盖行高亮显示 奇偶行背景颜色不同 css+jquery Table
- 【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css
- Swift之改变状态栏显示颜色的两种方法
- css如何让表格或者行隔行显示背景颜色,单双交替显示不同的背景颜色
- 一个textView中显示两种不同的字体(颜色,大小)
- 一个Label上显示两种不同大小、颜色的字体
- 奇偶行table颜色不同
- [DIV/CSS] (CSS) 不同浏览器对table中visibility属性显示的不同
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- js css table隔行显示颜色
- 面试题-在HTML中每隔3行改变一次颜色
- datagrid 间隔行显示不同的颜色.
- div+css - table中直接输入的文字和其他标记设置不同的颜色
- GridView判断使文字显示不同的颜色的两种方法:1前右判断;2.后台判断
- label 显示 不同的颜色
- 当前目录下maven生成jar并带lib文件夹啊
- HashMap之原理及死锁
- 未发布 手机可以同电脑端连接 测试 操作步奏
- Advanced Architecture Lab
- 后台和前台对json的处理
- Html+Css+Js_之table每隔3行显示不同的两种颜色
- ASP .NET MVC ORM 数据库优先
- java实现数字组合
- 集合
- learning opencv中介绍的一种可以连通区域的函数
- 用户管理 ---> 网页授权
- Unity3d-制作粒子光环特效
- git bash下出现错误Error: Cannot find module 'git目录/node_modules/git包/bin/git包'
- File.io读取文件(五)