Html中的表结构

时间:2010-03-09 09:02:50

标签: html css

我想为每一行创建一个带有复选框的表格结构,每行用不同的颜色标识,我该如何实现呢?

4 个答案:

答案 0 :(得分:3)

您可以使用第n个子选择器

tr:nth-child(even) {background: #f00;}
tr:nth-child(odd) {background: #0f0;}

请参阅此link

答案 1 :(得分:2)

CSS:

.odd {
  color:#CCC;
  background-color:#333;
}
.even {
  color:#333;
  background-color:#CCC;
}

HTML:

<table id="tbl">
  <tr class="odd">
   <td><input type="checkbox"/></td>
   <td>First row</td>
  </tr>
  <tr class="even">
   <td><input type="checkbox"/></td>
   <td>Second row</td>
  </tr>
  <tr class="odd">
   <td><input type="checkbox"/></td>
   <td>Third row</td>
  </tr>
</table>

JavaScript的:

function addRow(text)
{
  var rows = document.getElementById('tbl').getElementsByTagName('tr');
  var last = rows.item(rows.length - 1);
  var odd = last.getAttribute('class') == "odd"; 
  //use regex instead of == if you plan to have multiple classes for rows

  var row = document.createElement('tr');
  var td = document.createElement('td');
  var ip = document.createElement('input');
  ip.setAttribute('type', 'checkbox');
  td.appendChild(ip);
  tr.appendChild(td);
  td = document.createElement('td');
  td.appendChild(document.createTextNode(text));
  tr.appendChild(td);
  tr.setAttribute('class', odd ? 'even' : 'odd');
  document.getElementById('tbl').appendChild(tr);
}

使用以下方法添加行:

addRow("Fourth row");
addRow("Another row");
addRow("One more row");

答案 2 :(得分:1)

要设置交替颜色,您需要启动循环,如

for(i=0;i<no_checkboxes;i++)

然后在创建行时检查i是偶数还是奇数并相应地设置颜色

if(i%2)
 <td bgcolor="red">
else
 <td bgcolor="green">

然后将复选框括起来。

以下是php http://lorenzod8n.wordpress.com/2007/06/02/alternating-row-color-in-htmlcss-with-php/

中的示例

答案 3 :(得分:0)

您可以使用JQuery获取斑马纹(Alternate Colors):

$("table tr:nth-child(even)").addClass("striped");

stripe是在你的css中定义的类,你的表格的背景形成另一种颜色。