奇偶行table颜色不同

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  td {
  text-align:center
  }
    tr{    background:#FFF;    }             
  tr:nth-child(2n){         background:#F0F0F0; }
 tr{         background-color: expression((this.sectionRowIndex % 2 == 0) ? "#FFF" : "#F0F0F0" );}


</style>
</head>
<body>

<p align="center"><strong>大汉三通Lares服务平台Lboss请求统计</strong></p>
<table width="288" height="154"     border=1 align="center" cellpadding="0"  cellspacing="0" borderColor="#000000" bgcolor="#CCCCCC" style="BORDER-COLLAPSE: collapse">
  <tr>
    <th>数据描述</th>
    <th>总数</th>
  </tr>
  <tr>
    <td>失败总数</td>
    <td>27</td>
  </tr>
  <tr>
    <td>成功总数</td>
    <td>61298</td>
  </tr>
  <tr>
    <td>Lboss请求成功数 </td>
    <td>8621</td>
  </tr>
  <tr>
    <td>Lboss请求失败数</td>
    <td>0</td>
  </tr>
  <tr>
    <td>MQ请求成功数 </td>
    <td>52677</td>
  </tr>
  <tr>
    <td>MQ请求失败数 </td>
    <td>27</td>
  </tr>
  <tr>
    <td>非法请求数 </td>
    <td>19</td>
  </tr>
</table>
<p align="center"><strong>大汉三通Lares服务平台Lboss最近请求</strong></p>
<table width="514" height="160"     border=1   align="center" cellpadding="0" cellspacing="0" borderColor=#000000 bgcolor="#CCCCCC"  style="BORDER-COLLAPSE: collapse" >
  <tr>
    <th  bordercolor="#000000">数据描述</th>
    <th  bordercolor="#000000">终端号</th>
    <th  bordercolor="#000000">时间</th>
  </tr>
  <tr>
    <td bordercolor="#000000">最近成功请求</td>
    <td bordercolor="#000000">0000064614541875</td>
    <td bordercolor="#000000">2012-08-06 14:10:12</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近失败请求</td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:58</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近非法请求 </td>
    <td bordercolor="#000000">0000064614802441</td>
    <td bordercolor="#000000">2012-08-06 08:12:43 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近Lboss失败请求 </td>
    <td bordercolor="#000000">---</td>
    <td bordercolor="#000000">---</td>
  </tr>
  <tr>
    <td bordercolor="#000000">最近MQ失败请求 </td>
    <td bordercolor="#000000">0000064614501994</td>
    <td bordercolor="#000000">2012-08-06 09:47:53 </td>
  </tr>
  <tr>
    <td bordercolor="#000000">最慢响应请求 </td>
    <td bordercolor="#000000">0000064685040174</td>
    <td bordercolor="#000000">2012-08-06 10:54:09</td>
  </tr>
</table>
</body>
</html>

使用双重for循环来动态创建一个表格,并实现奇偶背景颜色交替变化,通常是在网页开发中完成的,尤其是在JavaScript结合HTML和CSS时。以下是基本的实现步骤: 1. 使用HTML定义表格的基本结构。 2. 利用JavaScript,特别是双重for循环,动态地往表格中添加和单元格。 3. 在添加每一时,通过判断索引的奇偶性来设置不同的背景颜色。 下面是一个简单的示例代码: HTML部分: ```html <!DOCTYPE html> <html> <head> <title>动态创建的表格</title> <style> .even-row { background-color: #f2f2f2; } .odd-row { background-color: #ffffff; } </style> </head> <body> <div id="table-container"></div> <script src="script.js"></script> </body> </html> ``` JavaScript部分 (script.js): ```javascript function createTable(rows, cols) { var tableContainer = document.getElementById('table-container'); var table = document.createElement('table'); table.setAttribute('border', '1'); for (var r = 0; r < rows; r++) { var tr = document.createElement('tr'); for (var c = 0; c < cols; c++) { var td = document.createElement('td'); td.textContent = '单元格'; tr.appendChild(td); } // 根据奇偶性设置不同的背景颜色 if (r % 2 === 0) { tr.className = 'even-row'; } else { tr.className = 'odd-row'; } table.appendChild(tr); } tableContainer.appendChild(table); } // 创建一个55列的表格 createTable(5, 5); ``` 在这个示例中,我们定义了一个`createTable`函数,它接受数和列数作为参数。然后,我们使用双重for循环来添加和单元格,并根据的索引是奇数还是偶数,分别给元素添加不同的类名(`.even-row`或`.odd-row`)。CSS样式定义了这两个类的不同背景颜色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值