javascript javascript中的交替行颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17335496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternate row colors in javascript
提问by user2526749
I'm making a table which have alternate row colors, for example the first row is red, the second is green, the third is red and so on. Written this code so far and got stuck, don't know what to put in if statement.
我正在制作一个具有交替行颜色的表格，例如第一行是红色，第二行是绿色，第三行是红色等等。写完这段代码就卡住了，不知道在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);
回答by Chamika Sandamal
Here is the pure css version,
这是纯css版本，
table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}
And here is the jQuery solution for the same,
这是相同的 jQuery 解决方案，
$(function(){
$("table tr:even").addClass("evenClassName");
$("table tr:odd").addClass("oddClassName");
});
Here is the pure JavaScript solution,
这是纯 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 ;
}
}
}
}
回答by Vivek Sadh
Use this(JQUERY WAY):-
使用这个（JQUERY 方式）：-
$(document).ready(function()
{
$("table#tblid tr:even").css("background-color", "color code");
$("table#tblid tr:odd").css("background-color", "color code");
});
Here is the JavaScript way of doing it:-
这是执行此操作的 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';
}
回答by CME64
use this, it will apply for all tables too
使用这个，它也将适用于所有表
var tr = document.getElementsByTagName('tr');
for(i=0;i<tr.length;i++){
if(i%2==0) tr[i].style.backgroundColor = 'red';
}
if you want to highlight the trs that have at least a td element inside use this :
如果要突出显示内部至少包含 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';
}
回答by Matthew Graves
Using just your code as a basis you'll want to do this in the if statement:
仅使用您的代码作为基础，您将希望在 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);
