1

CSS を使用したテーブルのスタイル設定に問題があります。

だから私は私のHTMLファイルにテーブルを持っています:

<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

ここに私のJavaScriptファイルがあります:

function altRows(id){
if(document.getElementsByTagName){  

    var table = document.getElementById(id);  
    var rows = table.getElementsByTagName("tr"); 

    for(i = 0; i < rows.length; i++){          
        if(i % 2 == 0){
            rows[i].className = "evenrowcolor";
        }else{
            rows[i].className = "oddrowcolor";
        }      
    }
  }
 }
 window.onload=function(){
altRows('alternatecolor');
 }

そして、ここに私のCSSファイルがあります:

table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
        border-style: solid;
    border-color: #a9c6c9;
}

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

問題は、奇数行でも奇数でも色を変えていないことです。

私は何を間違っていますか？

ありがとう。

4

5 に答える 5

7

このための CSS ソリューションを提供します。

table.class_name tr:nth-child(odd) {
   /* Styles */
}

table.class_name tr:nth-child(even) {
   /* Styles */
}

必要なのはこれだけですが、IE 8 以前ではサポートされていません。

デモ

テーブルのヘッダーについては、別のセレクターを使用して、次のような背景スタイルをオーバーライドするだけです。

table.altrowstable tr th {
    background: #fff;
}

デモ 2

于 2013-07-24T09:38:02.177 に答える
2

元のソースをいじったり変更したりしないソリューションを提供するのが好きです。HTMLは問題ありません。JScriptも問題ありません (非常に問題ありません)。.classname を使用しているため、クロス ブラウザーと互換性があります。私が行ったのは、CSSのクラスを変更したことだけです。

あなたのコード

table.oddrowcolor {
    background-color:#d4e3e5;
}
table.evenrowcolor {
    background-color:#c3dde0;
}

私の変化

tr.oddrowcolor {
    background-color:#d4e3e5;
}
tr.evenrowcolor {
    background-color:#c3dde0;
}

働くフィドル

あなたのコードから私のコードへの完全な変更。8文字。シンプルですね。

于 2013-07-24T10:04:07.753 に答える
0

CSS に問題があります。テーブルのクラスを設定していますが、td の場合はそうであるべきです。

tdスタイルを適用する場合と適用しない場合があるため、以下の js も変更する必要があります。tr

var rows = table.getElementsByTagName("td");

ここにあなたのCSSの問題があります

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

代わりにこれを使用する必要があります

table td.oddrowcolor{
    background-color:#d4e3e5;
}
table td.evenrowcolor{
    background-color:#c3dde0;
}

jsフィドル

于 2013-07-24T09:53:12.297 に答える