Question

我正在制作一个具有交替行颜色的表格，例如第一行是红色，第二行是绿色，第三行是红色，依此类推。到目前为止写了这段代码并且卡住了，不知道如果声明要放什么。

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);

Answer 1

这是纯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 ;
            }
        }
    }
}

Answer 2

使用此（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

Answer 3

使用它，它也适用于所有表格

var tr = document.getElementsByTagName('tr');

for(i=0;i<tr.length;i++){
    if(i%2==0) tr[i].style.backgroundColor = 'red';
}

DEMO

如果你想突出显示至少有一个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';
}

Answer 4

仅使用您的代码作为基础，您将在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);

Answer 5

这是纯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'; });

javascript中的备用行颜色

5 个答案: