javascript中的交替行顏色

Question

我正在制作一個具有交替行顏色的表格，例如第一行是紅色，第二行是綠色，第三行是紅色等等。 寫完這段代碼就卡住了，不知道在if語句里放什么。

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 方式）：-

$(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小提琴

Answer 3

使用這個，它也適用於所有表

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';
}

Answer 4

這是一個替代的純 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 選擇器。

上面的代碼也可以寫成兩行：

document.querySelectorAll('tr:nth-child(even)').forEach((evenRow) => { evenRow.style.backgroundColor = 'myEvenRowColor'; });
document.querySelectorAll('tr:nth-child(odd)').forEach((oddRow) => { oddRow.style.backgroundColor = 'myOddRowColor'; });

Answer 5

僅使用您的代碼作為基礎，您將希望在 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);