2

我正在制作一个具有交替行颜色的表格，例如第一行是红色，第二行是绿色，第三行是红色等等。到目前为止写了这段代码，卡住了，不知道在 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);
4

5 回答 5

14

这是纯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 ;
            }
        }
    }
}
于 2013-06-27T05:58:41.743 回答
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';
}
于 2013-06-27T06:17:14.187 回答
3

使用这个（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小提琴

于 2013-06-27T05:57:42.103 回答
1

这是另一种纯 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'; });
于 2020-08-26T17:22:33.440 回答
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);
于 2013-06-27T06:18:31.753 回答