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

最新推荐文章于 2020-05-25 11:03:49 发布
最新推荐文章于 2020-05-25 11:03:49 发布
阅读量358 收藏 1
点赞数
分类专栏： jquery/javascript 文章标签： javascript jquery ViewUI 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>换颜色</title>
</head>

<body>
	<table id="mytable">
    	<tr>
        	<td>11111</td>
        </tr>
        <tr>
        	<td>22222</td>
        </tr>
        <tr>
        	<td>33333</td>
        </tr>
        <tr>
        	<td>44444</td>
        </tr>
        <tr>
        	<td>55555</td>
        </tr>
        <tr>
        	<td>66666</td>
        </tr>
        <tr>
        	<td>77777</td>
        </tr>
        <tr>
        	<td>88888</td>
        </tr>
        <tr>
        	<td>99999</td>
        </tr>
        <tr>
        	<td>10101010</td>
        </tr>
        <tr>
        	<td>11111</td>
        </tr>
    </table>
    <script type="text/javascript">
    	var $tr=document.getElementById("mytable").getElementsByTagName("tr");
		var length=$tr.length;
		for(var i=0;i<length;i++){
			var j=parseInt(i/3);
			if(j%2==0){
				$tr[i].style.color="#f00";
			}else{
				$tr[i].style.color="#899";
			}
		}
    </script>
    
</body>
</html>
 
$("#mytable tr").each(function(){
			var index=$(this).index();
			var j=parseInt(index/3);
			if(j%2==0){
				$(this).css("color","#f00");	
			}else{
				$(this).css("color","#0C6");	
			}
		});
 
默翁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table显示n条记录，每3行换一次颜色
编程小菜菜的专栏
12-08 1302
有时候 我们会遇到对table的行显示不同背景色的问题，对于每行换一次颜色和每两行和三行换一个颜色的处理方式都是类似的，下面就说一下每3行换一次颜色的方法。     1     2     3     4     5     6     7     8     9     10     window.onload=function()
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条记录，每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++) {
面试题-在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.
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
显示 N 维数据表（带颜色突出显示）：N 维数据表清晰显示，条目颜色突出显示。-matlab开发
05-29
DisplayTable打印出节省空间的，清晰的N维数字数据表，其中包括： * 维度（行和列）标签和标题* 指定的单元格间距和精度*通过指定输出排列以任何顺序显示尺寸！ * 使用 cprintf 函数（也在 Matlab Central 上）突出...
lua代码-树型打印一个 table
07-14
要实现树型打印 `table`，我们需要递归地遍历 `table` 的每一个元素。主要思路是检查每个元素是否是 `table`，如果是，则继续递归；如果不是，则打印其值。以下是一个基本的实现示例： ```lua function printTable...
用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
10. **表格操作**：表格是网页布局的重要组成部分，由行（tr）、列（td）和表格（table）组成。表格属性设置中，间距指的是单元格之间的宽度。单元格可以合并，但必须是大小相同或相邻的单元格。表格可以设置背景...
用table显示n条记录，每三条换一下颜色
Studying . Working . A better life!
10-05 1930
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat
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条记录，样式要求，每隔三行换一种颜色
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
table td 文字显示两行，并且以…结尾，在360兼容模式不兼容解决方案。
qq_25445369的博客
12-20 4605
table td 文字显示两行，并且以…结尾，在360兼容模式不兼容解决方案。 这是一个div里面包括table。<div style="margin-left: -16px;width:850px;"> <table class="right-table" id="tableT" border="0" style="mar
element全局table  隔行换色
u011155153的专栏
05-25 1787
/*用来设置当前页面element全局table隔行换色*/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td{ background-color:#ebeef5;/*替换为你需要的颜色，觉得优先级不够就加!important*/ } ...
乘法表.php
Vivian_shuang的博客
08-15 464
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
纯css表格table隔行显示不同颜色
baidu_20876831的博客
06-07 9513
方法/步骤1制作简单表格，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;table,tr,td,th{padding: 0;margin: 0;}table{width: 100%;bord
thymleaf table循环集合每隔n列换一行
最新发布
04-02
在Thymeleaf中，可以使用th:each指令循环集合，并在指令中使用th:if指令判断当前是第几列，并在指定列数时添加换行符。以下是示例代码： ``` <table> ,iterStat : ${items}"> ${item.name}"> ${item.age}"> $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值