试用html在table表中用循环把表格里的行的背景颜色分为红白交替。
试用html在table表中用循环把表格里的行的背景颜色分为红白交替。它的Css样式和javascript....
试用html在table表中用循环把表格里的行的背景颜色分为红白交替。它的Css样式和javascript.
展开
2个回答
展开全部
<html>
<head>
<style type="text/css">
body
{
text-align:center;
}
table
{
font-size:12px;
text-align:center;
border:1px solid #EFEFEF;
border-cellspan:cellspan;
margin-top:50px;
}
td
{
border:1px solid #EFEFEF;
}
</style>
<script type="text/javascript">
function changbackgroundcolor()
{
var trs=document.getElementById("table1").getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
if(i%2==0)
{
trs[i].style.backgroundColor="#FFFFFF";
}
else
{
trs[i].style.backgroundColor="#000000";
}
}
}
</script>
</head>
<body onLoad="changbackgroundcolor();">
<table width="700" id="table1" cellspacing="0" cellpadding="5" align="center" >
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
</table>
</body>
</html>
<head>
<style type="text/css">
body
{
text-align:center;
}
table
{
font-size:12px;
text-align:center;
border:1px solid #EFEFEF;
border-cellspan:cellspan;
margin-top:50px;
}
td
{
border:1px solid #EFEFEF;
}
</style>
<script type="text/javascript">
function changbackgroundcolor()
{
var trs=document.getElementById("table1").getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
if(i%2==0)
{
trs[i].style.backgroundColor="#FFFFFF";
}
else
{
trs[i].style.backgroundColor="#000000";
}
}
}
</script>
</head>
<body onLoad="changbackgroundcolor();">
<table width="700" id="table1" cellspacing="0" cellpadding="5" align="center" >
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
</table>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script language="javascript">
var t = document.getElementById("GhostManor").getElementsByTagName("tr");
function $(){
for( i = 0 ; i < t.length ; i++ ){
t[i].className = (i%2>0) ? "ghost1" : "ghost2" ;
}
for( j = 0 ; j < t.length ; j++){
t[j].onmouseover = function(){
this.tmpClass = this.className;
this.className = "onsetr";
}
t[j].onmouseout = function(){
this.className = this.tmpClass;
}
}
}
window.onload = $;
</script>
说明三个可变量：GhostManor、ghost1、ghost2。其中GhostManor是表格的ID属性 ghost1和ghost2是定义的CSS样式。
var t = document.getElementById("GhostManor").getElementsByTagName("tr");
function $(){
for( i = 0 ; i < t.length ; i++ ){
t[i].className = (i%2>0) ? "ghost1" : "ghost2" ;
}
for( j = 0 ; j < t.length ; j++){
t[j].onmouseover = function(){
this.tmpClass = this.className;
this.className = "onsetr";
}
t[j].onmouseout = function(){
this.className = this.tmpClass;
}
}
}
window.onload = $;
</script>
说明三个可变量：GhostManor、ghost1、ghost2。其中GhostManor是表格的ID属性 ghost1和ghost2是定义的CSS样式。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
