我正在制作一个具有交替行颜色的表格,例如第一行是红色,第二行是绿色,第三行是红色,依此类推。 到目前为止写了这段代码并且卡住了,不知道如果声明要放什么。
var color = "red";
var outputString = "<table border=1 width=50%>";
outputString = outputString + "<tr><td>a</td><td>a^2</td><td>a^3</td></tr>";
for (var i = 1; i <= 5; i++ ) {
if (i%2 == 0) {
} else {
}
outputString += "<tr class=" + color + ">" + "<td>" + i + "</td>" + "<td>" + i * i + "</td>" + "<td>" + i * i * i + "</td>" + "</tr>";
}
outputString += "</table>";
document.write(outputString);
答案 0 :(得分:13)
这是纯css版本,
table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}
这是同样的jQuery解决方案,
$(function(){
$("table tr:even").addClass("evenClassName");
$("table tr:odd").addClass("oddClassName");
});
这是纯JavaScript解决方案,
function altrows(firstcolor,secondcolor)
{
var tableElements = document.getElementsByTagName("table") ;
for(var j = 0; j < tableElements.length; j++)
{
var table = tableElements[j] ;
var rows = table.getElementsByTagName("tr") ;
for(var i = 0; i <= rows.length; i++)
{
if(i%2==0){
rows[i].style.backgroundColor = firstcolor ;
}
else{
rows[i].style.backgroundColor = secondcolor ;
}
}
}
}
答案 1 :(得分:3)
使用此(JQUERY WAY): -
$(document).ready(function()
{
$("table#tblid tr:even").css("background-color", "color code");
$("table#tblid tr:odd").css("background-color", "color code");
});
这是JavaScript的方式: -
var tblrows = document.getElementsByTagName('tr');
for(i=0;i<tblrows.length;i++){
if(i%2==0) tblrows[i].style.backgroundColor = '#f22000';
else tblrows[i].style.backgroundColor = '#a02141';
}
<强> JS FIDDLE 强>
答案 2 :(得分:2)
使用它,它也适用于所有表格
var tr = document.getElementsByTagName('tr');
for(i=0;i<tr.length;i++){
if(i%2==0) tr[i].style.backgroundColor = 'red';
}
如果你想突出显示至少有一个td元素的trs,请使用:
var tr = document.getElementsByTagName('tr');
for(i=0;i<tr.length;i++){
if(i%2==0 && tr[i].getElementsByTagName('td').length) tr[i].style.backgroundColor = 'red';
}
答案 3 :(得分:0)
仅使用您的代码作为基础,您将在if语句中执行此操作:
var color_even = "red";
var color_odd = "green";
var outputString = "<table border=1 width=50%>";
outputString = outputString + "<tr><td>a</td><td>a^2</td><td>a^3</td></tr>";
for (var i = 1; i <= 5; i++ ) {
if (i%2 == 0) {
color_used = color_even;
} else {
color_used = color_odd;
}
outputString += "<tr class=\"" + color_used + "\">" + "<td>" + i + "</td>" + "<td>" + i * i + "</td>" + "<td>" + i * i * i + "</td>" + "</tr>";
}
outputString += "</table>";
document.write(outputString);
答案 4 :(得分:0)
这是纯JavaScript + CSS的替代解决方案。
// get all even rows
var evenRows = document.querySelectorAll('tr:nth-child(even)');
// get all odd rows
var oddRows = document.querySelectorAll('tr:nth-child(odd)');
// set even rows background color
evenRows.forEach((evenRow) => { evenRow.style.backgroundColor = 'myEvenRowColor'; });
// set odd rows background color
oddRows.forEach((oddRow) => { oddRow.style.backgroundColor = 'myOddRowColor'; });
这利用了JavaScript的querySelectorAll和forEach函数以及CSS selectors的优势。
上面的代码也可以写成两行:
document.querySelectorAll('tr:nth-child(even)').forEach((evenRow) => { evenRow.style.backgroundColor = 'myEvenRowColor'; });
document.querySelectorAll('tr:nth-child(odd)').forEach((oddRow) => { oddRow.style.backgroundColor = 'myOddRowColor'; });