2

行の色が交互になっているテーブルを作成しています。たとえば、最初の行は赤、2 番目の行は緑、3 番目の行は赤などです。ここまでコードを書いて行き詰まりました。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 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フィドル

于 2013-06-27T05:57:42.103 に答える
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 に答える