怎么动态的改变Html中tr行的背景颜色
日期：2014-05-16 浏览次数：20507 次
如何动态的改变Html中tr行的背景颜色
谁知道如何动态的改变Html中tr行的背景颜色
比如我定义了很多的 <tr, id= ' '>
id的值是动态生成的
我在javascript中如何能动态的改变一条 <tr> 这行的颜色？
谢谢
我的页面左边是树型结构。。。
谢谢
------解决方案--------------------
既然能动态生成id，就能得到这个id
然后使用
document.getElementById( "tr的id ").style.backgroundColor= "red "
------解决方案--------------------
<script>
function cc(a){
a.style.backgroundColor= "red "
}
</script>
</HEAD>
<BODY>
<TABLE id= "table1 " border= "1 ">
<TR onclick= "cc(this) ">
<TD> aaaa </TD>
<TD> <a href= "# " > 111111 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> bbbbb </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 22222 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> ccccc </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 33333 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> dddddd </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 444444 </a> </TD>
</TR>
</TABLE>
------解决方案--------------------
<script language= "javascript ">
function trfocus(){this.style.background= "#CCCCCC ";}
function trblur(){this.style.background= " ";}
function window.onload()
{
var trs = document.getElementByTagName( "tr ");
for(var i=0;i <trs.length;i++)
{
trs[i].onmouseover = trfocus;
trs[i].onmouseout = trblur;
}
}
</script>
------解决方案--------------------
gzdiablo 正解
------解决方案--------------------
//gzdiablo使用的getElementByTagName类，不知道为什么，我使用这个的时候总是提示
对象不支持该方法，所以我不喜欢：）
<html>
<head>
<title> 枚举字符串 </title>
<body>
<table border=1 id= "tb1 ">
<tr id= "tr1 "> <td> aaaaa </td> <td> aaaaa </td> </tr>
<tr id= "tr2 "> <td> bbbbbb </td> <td> aaaaa </td> </tr>
<tr id= "tr3 "> <td> aaaaa </td> <td> aaaaa </td> </tr>
<tr id= "tr4 "> <td> bbbbbb </td> <td> aaaaa </td> </tr>
</table>
<script language= "javascript ">
function trfocus(){this.style.background= "#CCCCCC ";}
function trblur(){this.style.background= " ";}
function window.onload()
{
var trs = document.getElementById( "tb1 ");
if(trs.lastChild.hasChildNodes()){
var s=trs.lastChild.childNodes.length;
for(var i=0;i <s;i++){
trs.lastChild.childNodes[i].onmouseover=trfocus;
trs.lastChild.childNodes[i].onmouseout=trblur;
}
}
}
</script>
</body>
</html>
------解决方案--------------------
getElementsByTagName
谁知道如何动态的改变Html中tr行的背景颜色
比如我定义了很多的 <tr, id= ' '>
id的值是动态生成的
我在javascript中如何能动态的改变一条 <tr> 这行的颜色？
谢谢
我的页面左边是树型结构。。。
谢谢
------解决方案--------------------
既然能动态生成id，就能得到这个id
然后使用
document.getElementById( "tr的id ").style.backgroundColor= "red "
------解决方案--------------------
<script>
function cc(a){
a.style.backgroundColor= "red "
}
</script>
</HEAD>
<BODY>
<TABLE id= "table1 " border= "1 ">
<TR onclick= "cc(this) ">
<TD> aaaa </TD>
<TD> <a href= "# " > 111111 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> bbbbb </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 22222 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> ccccc </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 33333 </a> </TD>
</TR>
<TR onclick= "cc(this) ">
<TD> dddddd </TD>
<TD> <a href= "# " onclick= "InsertRow(); "> 444444 </a> </TD>
</TR>
</TABLE>
------解决方案--------------------
<script language= "javascript ">
function trfocus(){this.style.background= "#CCCCCC ";}
function trblur(){this.style.background= " ";}
function window.onload()
{
var trs = document.getElementByTagName( "tr ");
for(var i=0;i <trs.length;i++)
{
trs[i].onmouseover = trfocus;
trs[i].onmouseout = trblur;
}
}
</script>
------解决方案--------------------
gzdiablo 正解
------解决方案--------------------
//gzdiablo使用的getElementByTagName类，不知道为什么，我使用这个的时候总是提示
对象不支持该方法，所以我不喜欢：）
<html>
<head>
<title> 枚举字符串 </title>
<body>
<table border=1 id= "tb1 ">
<tr id= "tr1 "> <td> aaaaa </td> <td> aaaaa </td> </tr>
<tr id= "tr2 "> <td> bbbbbb </td> <td> aaaaa </td> </tr>
<tr id= "tr3 "> <td> aaaaa </td> <td> aaaaa </td> </tr>
<tr id= "tr4 "> <td> bbbbbb </td> <td> aaaaa </td> </tr>
</table>
<script language= "javascript ">
function trfocus(){this.style.background= "#CCCCCC ";}
function trblur(){this.style.background= " ";}
function window.onload()
{
var trs = document.getElementById( "tb1 ");
if(trs.lastChild.hasChildNodes()){
var s=trs.lastChild.childNodes.length;
for(var i=0;i <s;i++){
trs.lastChild.childNodes[i].onmouseover=trfocus;
trs.lastChild.childNodes[i].onmouseout=trblur;
}
}
}
</script>
</body>
</html>
------解决方案--------------------
getElementsByTagName
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
