如何设置特定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>
最佳答案
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
谢谢，我个人认为你的方法很有灵活性。谢谢你的帮助。
其他回答(2)
2
<style>
.table1 tr{background:yellow;}
</style>
document.getElementById("table1").className="table1";
我想先通过 var table1 = document.getElementById('talbe1'); 得到table，然后，再得到它的tr，设置它的style.background，可以吗？代码又怎么写呢？
@dianyitongxiao:
document.getElementById("table1").getElementsByTagName("tr");
没必要写循环，直接通过table来设置样式
@dianyitongxiao: 无需这样，通过它恢复的Style 代码就可以实现
@sym_cn: 谢谢，我又就会了一招。
0
function setcolor(){
var rows = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for(var tr in rows){
tr.style.background = "yellow";
}
}
非常感谢，你的方法很好，只是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 }
