用table显示n条记录，每三条换一下颜色

最新推荐文章于 2021-06-09 17:30:40 发布
原创 最新推荐文章于 2021-06-09 17:30:40 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #string #html #function #import #path

本文介绍了一种使用JavaScript实现的网页表格美化技巧，通过为表格的每一行根据其位置自动分配不同的背景颜色，来提高阅读体验。该方法适用于展示大量数据的场景，能够使数据更加清晰易读。

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>用table显示n条记录，每三行换一次颜色</title>
   
 

  </head>
 
  <body>
<table id="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>

<script type="text/javascript">
 window.onload=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>
  </body>
</html>

相关业务问题+系统问题+设计问题整理统计
张彦峰的博客
04-07 171万+
业务系统及其他相关面试问题整理：线上相关问题排查+高并发系统的限流+高并发秒杀系统设计+负载均衡+一个网站有 20 亿 url 存在一个黑名单中，这个黑名单要怎么存？若此时随便输入一个 url，你如何快速判断该 url 是否在这个黑名单中？并且需在给定内存空间（比如：500M）内快速判断出？
table显示n条记录，每3行换一次颜色
编程小菜菜的专栏
12-08 1398
有时候 我们会遇到对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 1777
window.onload=function() { var tbl = document.getElementById("tbl"); //首先获取表格 var rows = tbl.getElementsByTagName("tr"); //获取行 for(i=0;i<rows.le
js控制表格颜色
贾世鑫的博客
10-08 4203
题目：用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条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。
08-18 7909
window.onload=function() { var tbl = document.getElementById("tbl"); var rows = tbl.getElementsByTagName("tr"); for(i=0;i<rows.length;i++) {
面试题：用table显示n条记录，样式要求，每隔三行换一种颜色
GS2016的博客
04-20 839
&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
现有一个sqlite数据库 string createTestRecordsTable = @" CREATE TABLE IF NOT EXISTS TestRecords ( Id INTEGER PRIMARY KEY AUTOINCREMENT, ProcessName TEXT NOT NULL, Barcode TEXT NOT NULL, TestResult TEXT NOT NULL, StartTime DATETIME NOT NULL, EndTime DATETIME NOT NULL );"; string createTestResultsTable = @" CREATE TABLE IF NOT EXISTS TestResults ( RecordId INTEGER NOT NULL, TestName TEXT NOT NULL, TestValue REAL NOT NULL, FOREIGN KEY(RecordId) REFERENCES TestRecords(Id) );"; string createIndex = "CREATE INDEX IF NOT EXISTS idx_testresults_name ON TestResults(TestName);"; 现在需要用C# winform生成一个柱状图,已有一个预设DateTime,图表显示前7天的产量数据,白班时间段8:30-21:00,夜班时间21:00到第二天8:30,当天白班产品OK数和NG数叠柱状图显示,当天夜班OK数和NG数叠柱状图显示,当天白班和夜班生产数据分组柱状图显示.每个柱子内部显示数量,每个OK柱子内部显示当前柱子良率,每天柱子顶部显示当天总良率. 所有良率只显示百分比,不显示文字. 鼠标放在柱状图上高亮显示该柱状图并显示班次信息. 根据柱状图计算的良率,生成一个折线图,通过下拉复选框选择要显示的白班良率,夜班良率,当天总量率.
最新发布
11-11
这里我们假设每条记录的时间段都在一个班次内（或通过其他方式已经分割好）。 如果数据没有按班次分割，我们需要在查询时根据时间范围进行汇总。 为了简化，我们假设每条记录都属于一个班次（通过StartTime和...
% 设置三条曲线的参数data epochs1 = 0:160; % 第一条曲线训练轮次 final_MAPE1 = 0.5819; epochs2 = 0:148; % 第二条曲线训练轮次 final_MAPE2 = 0.2506; epochs3 = 0:125; % 第三条曲线训练轮次 final_MAPE3 = 0.0974; % 公共参数 initial_MAPE = 10; % 初始MAPE值 decay_rate = 0.05; % 衰减率参数 noise_intensity = 0.4; % 噪声强度系数0.8 % 计算理论MAPE值（指数衰减模型） MAPE_theoretical1 = final_MAPE1 + (initial_MAPE - final_MAPE1) * exp(-decay_rate * epochs1); MAPE_theoretical2 = final_MAPE2 + (initial_MAPE - final_MAPE2) * exp(-decay_rate * epochs2); MAPE_theoretical3 = final_MAPE3 + (initial_MAPE - final_MAPE3) * exp(-decay_rate * epochs3); % 添加随机噪声模拟真实训练波动（收敛阶段减小噪声） rng(42); % 设置随机种子保证可重复性 % 第一条曲线噪声（收敛阶段减小噪声） noise1 = noise_intensity * randn(size(epochs1)); converge_start1 = round(0.65 * length(epochs1)); % 60%处开始收敛 noise1(converge_start1:end) = noise1(converge_start1:end) * 0.3; % 收敛阶段噪声减小 MAPE_noisy1 = MAPE_theoretical1 + noise1; MAPE_noisy1 = max(MAPE_noisy1, 0); MAPE_noisy1(end) = final_MAPE1; % 确保终点收敛值准确 % 第二条曲线噪声 noise2 = noise_intensity * randn(size(epochs2)); converge_start2 = round(0.6 * length(epochs2));% 60%处开始收敛 noise2(converge_start2:end) = noise2(converge_start2:end) * 0.3; MAPE_noisy2 = MAPE_theoretical2 + noise2; MAPE_noisy2 = max(MAPE_noisy2, 0); MAPE_noisy2(end) = final_MAPE2; % 第三条曲线噪声 noise3 = noise_intensity * randn(size(epochs3)); converge_start3 = round(0.55 * length(epochs3));% 55%处开始收敛 noise3(converge_start3:end) = noise3(converge_start3:end) * 0.3; MAPE_noisy3 = MAPE_theoretical3 + noise3; MAPE_noisy3 = max(MAPE_noisy3, 0); MAPE_noisy3(end) = final_MAPE3; % 创建图表 figure('Color', 'white', 'Position', [100, 100, 1000, 700]); hold on; % 绘制三条曲线（不同颜色和线型）并添加终点标记 p1 = plot(epochs1, MAPE_noisy1, 'Color', [0, 0.447, 0.741], 'LineWidth', 1.8, ... 'Marker', 'o', 'MarkerSize', 6, 'MarkerFaceColor', [0, 0.447, 0.741], ... 'MarkerIndices', length(epochs1), ... % 只在终点添加标记 'DisplayName', sprintf('MLP')); p2 = plot(epochs2, MAPE_noisy2, 'Color', [0.85, 0.325, 0.098], 'LineWidth', 1.8, ... 'Marker', 's', 'MarkerSize', 6, 'MarkerFaceColor', [0.85, 0.325, 0.098], ... 'MarkerIndices', length(epochs2), ... 'DisplayName', sprintf('WOA-MLP')); p3 = plot(epochs3, MAPE_noisy3, 'Color', [0.466, 0.674, 0.188], 'LineWidth', 1.8, ... 'Marker', 'd', 'MarkerSize', 6, 'MarkerFaceColor', [0.466, 0.674, 0.188], ... 'MarkerIndices', length(epochs3), ... 'DisplayName', sprintf('FT-WOA-MLP')); % 添加收敛值文本标注 text(epochs1(end)+3, final_MAPE1, sprintf('MAPE: %.4f', final_MAPE1), ... 'FontSize', 11, 'FontWeight', 'bold', 'Color', [0, 0.447, 0.741]); text(epochs2(end)+3, final_MAPE2, sprintf('MAPE: %.4f', final_MAPE2), ... 'FontSize', 11, 'FontWeight', 'bold', 'Color', [0.85, 0.325, 0.098]); text(epochs3(end)+3, final_MAPE3, sprintf('MAPE: %.4f', final_MAPE3), ... 'FontSize', 11, 'FontWeight', 'bold', 'Color', [0.466, 0.674, 0.188]); % 设置坐标轴和标签 xlabel('迭代次数(Iterations)', 'FontSize', 13, 'FontWeight', 'bold'); ylabel('平均绝对误差 (MAPE)', 'FontSize', 13, 'FontWeight', 'bold'); title('多模型迭代误差MAPE对比', 'FontSize', 17, 'FontWeight', 'bold'); xlim([0, max([epochs1, epochs2, epochs3]) + 25]); ylim([-1, initial_MAPE + 5]); grid on; box on; % 添加图例和注释 legend('Location', 'northeast', 'FontSize', 11); set(gca, 'FontSize', 12, 'FontWeight', 'bold'); set(gcf, 'Color', [0.96, 0.96, 0.96]); % ===== 创建自适应尺寸的数据表格 ===== model_data = table([epochs1(end); epochs2(end); epochs3(end)], ... [final_MAPE1; final_MAPE2; final_MAPE3], ... [converge_start1; converge_start2; converge_start3], ... 'VariableNames', {'迭代次数', '最终MAPE', '收敛起点'}, ... 'RowNames', {'MLP', 'WOA-MLP', 'FT-WOA-MLP'}); % 计算表格尺寸（基于内容自适应） column_widths = [80, 80, 80]; % 每列宽度（像素） row_height = 25; % 每行高度（像素） header_height = 30; % 表头高度（像素） % 计算表格总尺寸 table_width = sum(column_widths)+122; table_height = 83.5; % 获取图形尺寸 fig_pos = get(gcf, 'Position'); fig_width = fig_pos(3); fig_height = fig_pos(4); % 计算表格位置（水平居中，距离顶部100像素） table_x = (fig_width - table_width) / 2; table_y = fig_height - table_height - 60; % 创建表格（使用uitable） t = uitable('Data', model_data{:,:}, ... 'ColumnName', model_data.Properties.VariableNames, ... 'RowName', model_data.Properties.RowNames, ... 'Position', [table_x, table_y, table_width, table_height], ... 'FontSize', 11, ... 'BackgroundColor', [1, 1, 1; 0.95, 0.95, 0.95], ... % 交替行颜色 'ColumnWidth', num2cell(column_widths), ... % 设置每列宽度 'RowStriping', 'on'); % 启用行条纹 hold off; 让迭代过程中的MAPE全程不要低于最终MAPE
07-30
我们可以记录每一步的MAPE值，然后在绘制曲线之前，对MAPE值进行处理，使得曲线呈现下降趋势（例如，使用累积最小值）。 2. 另一种思路是，在每次迭代时，我们只保留到当前迭代为止的最小MAPE值，然后绘制这个...
DPL在电网规划中的高级应用：自动校验N-1准则并生成薄弱环节报告的智能系统
本文围绕DPL语言在电网规划中的应用，系统研究了N-1安全准则的建模方法与DPL实现机制，构建了基于静态安全分析的支路开断模拟与潮流重分布模型，并设计了高效的N-1扫描算法与容错机制以提升计算稳定性。进一步地，...
CZK-100B人机界面终极指南：按键逻辑、显示信息与高效操作路径全公开
本文围绕CZK-100B人机界面的操作特性与交互设计展开系统研究，重点探讨了按键逻辑架构、显示信息组织及高效操作路径的构建方法。通过分析物理按键响应机制与状态机模型，提出了一套完整的按键交互控制方案，并结合...
java Html&JavaScript面试题：用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，5，6用绿色字体，7，8，9用红颜色字体。...
weixin_33722405的博客
01-30 133
<!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 115
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> wi...
用javaScript对table的n条记录添加颜色
想念的专栏
02-19 899
用 table  显示 n  条记录，每 3  行换一次颜色，即 1 ，2 ，3  用红色字体，4 ，5， 6  用绿色字体，7 ，8 ，9  用红颜色字体 颜色换行 1 2 3 4 5 6 7 8 9 10 window.onload=function(){
button是块级元素吗_HTML中的块级元素与内联元素——零基础自学网页制作
weixin_39747568的博客
11-20 718
块级元素与内联元素的概念与区别在HTML中，大多数元素都被定义为块级元素或内联元素。块级元素通常会独立成行，而内联元素会并排显示。在我们学过的元素中，块级元素如： 这些。内联元素如下面我们通过练习来直观看看他们的区别。块级元素展示，代码如下： 第一个网页表格元素 块级元素与内联元素 零基础自学网页制作 表格的头部信息 表格的脚部信息 表格标题 ...
html表格内数据填充颜色,点击数据，自动为整行表格填充颜色，再也不用担心看错数据了...
weixin_39926042的博客
06-09 2220
Hello，大家好，今天跟大家分享我们如何实现实现点击一个单元格，这个也是一个粉丝问到的问题。自动为数据区域的整行填充一个颜色，效果如下图，当我们点击一个单元格的时候们就会为整行填充一个颜色，这个的操作跟我们之前分享的聚光灯效果十分的相似，他的操作也不难，在这里跟大家分享2中方法，下面就让我们来看一下他是如何操作的一、使用vba对于这种自动填充颜色的功能，最简单有效的方法就是使用vba来实现这样的...
Html+Css+Js_之table每隔3行显示不同的两种颜色
王燕欣的博客
04-26 4207
/**             最近因项目的需求，有这样的一个问题：                 一个table显示n条记录，每3行换一次颜色，例如：1，2，3行红色背景，4，5，6行绿色背景，7，8，9行红色背景...以此类推！         */         window.onload=function() {                  var tbl = docu
table 显示 n行记录,每3行换一次颜色
默翁的博客
04-08 445
&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
Java笔试题：表格显示n条记录，每3行循环变色。
对于这道java笔试题，我们需要用table来显示n条记录，并且要求每3行换一次颜色。具体来说，1，2，3行要用红色字体显示，4，5，6行用绿色字体显示，7，8，9行用红色字体显示。下面是实现这个需求的代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值