javascript与jquery 控制表格行的字体与背景色
<script type="text/javascript"> window.onload=function(){ var table=document.getElementById("tb"); var tboby=table; var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ trs.style.color="#3333ff";//设置偶数行字体的颜色 }else{ trs.style.background="#99ffff"; //设置奇数行的背景色 } } };</script></head><body><table id="tb"> <tbody> <tr><td>第一行</td><td>第一行</td></tr> <tr><td>第二行</td><td>第二行</td></tr> <tr><td>第三行</td><td>第三行</td></tr> <tr><td>第四行</td><td>第四行</td></tr> <tr><td>第五行</td><td>第五行</td></tr> <tr><td>第六行</td><td>第六行</td></tr> </tbody></table></body> 注: 设置行的背景色也可以这样写 trs.style.backgroundColor="#99ffff"; //设置偶数行的背景色下面是jquery实现相同的功能
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("#tb tbody tr:even").css("color","#3333ff");$("#tb tbody tr:odd").css("background","#99ffff");});</script></head><body><table id="tb"><tbody><tr><td>第一行</td><td>第一行</td></tr><tr><td>第二行</td><td>第二行</td></tr><tr><td>第三行</td><td>第三行</td></tr><tr><td>第四行</td><td>第四行</td></tr><tr><td>第五行</td><td>第五行</td></tr><tr><td>第六行</td><td>第六行</td></tr></tbody></table></body>注: 这里当然也可以写 $("#tb tbody tr:odd").css("backgroundColor","#99ffff");
页:
[1]