首页 新闻 搜索 专区 学院

如何设置特定table中的tr的背景色?

0
[已解决问题] 解决于 2012-11-01 13:31

一个页面中有两个table,我想设置table1的tr的背景色是yellow。而table1中的不设置。下面的代码会将两个table的tr全部设置,如下,如何修改只设置table1中的tr的背景色:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title></title>    
 6 </head>
 7 <body>
 8     <table id="table1" border="2" style="width:556px; height:100px;">
 9         <caption>table1</caption>
10         <tr><td></td><td></td><td></td><td></td><td></td></tr> 
11         <tr><td></td><td></td><td></td><td></td><td></td></tr>
12         <tr><td></td><td></td><td></td><td></td><td></td></tr>
13         <tr><td></td><td></td><td></td><td></td><td></td></tr>
14         <tr><td></td><td></td><td></td><td></td><td></td></tr>           
15     </table>
16     <table id="table2" border="2" style="width:556px; height:100px;">
17         <caption>table2</caption>
18         <tr><td></td><td></td><td></td><td></td><td></td></tr> 
19         <tr><td></td><td></td><td></td><td></td><td></td></tr>
20         <tr><td></td><td></td><td></td><td></td><td></td></tr>
21         <tr><td></td><td></td><td></td><td></td><td></td></tr>
22         <tr><td></td><td></td><td></td><td></td><td></td></tr>        
23     </table>
24     <input type="button" value="setColor" onclick="setColor()"/>
25     <script type="text/javascript">
26         function setColor() {         
27             var trs = document.getElementsByTagName('tr');
28             for (var i = 0; i < trs.length; i++) {
29                 trs[i].style.background = "yellow";
30             }
31         }
32     </script>
33 </body>
34 </html>
dianyitongxiao的主页 dianyitongxiao | 初学一级 | 园豆:77
提问于:2012-10-31 19:17
< >
分享
最佳答案
0

<script type="text/javascript">
function setColor() {
var table = document.getElementById("table1");
var trs = table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].style.background = "yellow";
}
}
</script>

奖励园豆:5
chenping2008 | 大侠五级 |园豆:9836 | 2012-10-31 23:30

谢谢,我个人认为你的方法很有灵活性。谢谢你的帮助。

dianyitongxiao | 园豆:77 (初学一级) | 2012-11-01 13:29
其他回答(2)
2

<style>

.table1 tr{background:yellow;}

</style>

document.getElementById("table1").className="table1";

向往-SONG | 园豆:4853 (老鸟四级) | 2012-10-31 19:36

我想先通过 var table1 = document.getElementById('talbe1'); 得到table,然后,再得到它的tr,设置它的style.background,可以吗?代码又怎么写呢?

支持(0) 反对(0) dianyitongxiao | 园豆:77 (初学一级) | 2012-10-31 19:44

@dianyitongxiao: 

document.getElementById("table1").getElementsByTagName("tr");

没必要写循环,直接通过table来设置样式

支持(0) 反对(0) 向往-SONG | 园豆:4853 (老鸟四级) | 2012-10-31 19:51

@dianyitongxiao:  无需这样,通过它恢复的Style 代码就可以实现

支持(0) 反对(0) sym_cn | 园豆:798 (小虾三级) | 2012-11-01 09:34

@sym_cn: 谢谢,我又就会了一招。

支持(0) 反对(0) dianyitongxiao | 园豆:77 (初学一级) | 2012-11-01 13:30
0

function setcolor(){

    var rows = document.getElementsByTagName("table")[0].getElementsByTagName("tr");

     for(var tr  in rows){

         tr.style.background = "yellow";

      }

    }

kivmi | 园豆:207 (菜鸟二级) | 2012-10-31 23:40

非常感谢,你的方法很好,只是for循环中,这里的tr是key,而不是value。所以要写成下面这样,请你参考讨论。

1 function setColor2() {
2             var rows = document.getElementsByTagName('table')[0].getElementsByTagName('tr');
3             for (var i = 0; i < rows.length; i++) {
4                 rows[i].style.background = "yellow";
5             }
6         }
支持(0) 反对(0) dianyitongxiao | 园豆:77 (初学一级) | 2012-11-01 13:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册