我想为每一行创建一个带有复选框的表格结构,每行用不同的颜色标识,我该如何实现呢?
答案 0 :(得分:3)
答案 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中定义的类,你的表格的背景形成另一种颜色。