2

このようなページがあるとします

<html>    
    <body>
        <table id="t1">
            <tr><th>Head1</th><th>Head2</th></tr>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td></tr>
      </table>
   </body>
</html>

私のCSS

table th { background:color1;} 
table td { background:color2;}

javascript ステートメントを使用して、ヘッダー行を除くすべての行の背景色を変更するにはどうすればよいですか。各行と列をループするのが唯一の方法ですか?

背景を取得document.getElementById('t1').rows[1]およびrows[2]変更できます。しかし、他に効率的な方法はありますか？

4

4 に答える 4

7

要素をループして背景を変更できます

var els = document.getElementById("t1").getElementsByTagName("td");

for(var i=0;i<els.length;i++){
  els[i].style.background = "green"   
}
于 2012-08-09T18:17:25.177 に答える
3

これを試すことができます：

table th {background: color1;}
table tbody {background: color2;}

<table id="t1">
    <tr><th>Head1</th><th>Head2</th></tr>
    <tbody id="t2">
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
    </tbody>
</table>

そしてスクリプトで：

document.getElementById('t2').style.backgroundColor=color3;

編集

特定の にルールを追加することもできstyleSheetます。

CSS:

table th {background: color1;}
table td {background: color2;}

脚本：

var sSheet = document.styleSheets[0];
if (sSheet.insertRule) {
    sSheet.insertRule('td {background-color: color3}', sSheet.cssRules.length);
} else { // For IE < 9
    sSheet.addRule('td', 'background-color: color3', -1);
}

既存のルール自体を変更することもできます。

var tdRule,
    sSheet = document.styleSheets[0];       
if (sSheet.cssRules) {
    tdRule = sSheet.cssRules[1];
} else { // For IE < 9
    tdRule = sSheet.rules[1];
}
tdRule.style.backgroundColor = color3;
于 2012-08-09T18:37:33.667 に答える
3

テーブルと同じように、行にクラスを配置し、背景を css に配置します。

于 2012-08-09T18:07:34.550 に答える
-1

私はJQueryを使用しています。

$('td').css('background','#3232');
于 2012-08-09T18:39:29.690 に答える