Java table逐行变色，点击变色

最新推荐文章于 2021-02-26 23:41:37 发布

evangel_z

最新推荐文章于 2021-02-26 23:41:37 发布

阅读量1.9k

点赞数

分类专栏： HTML 文章标签： table java function javascript border html

HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<HTML>   
<HEAD>   
<META   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
<TITLE>table</TITLE>   
<STYLE>   
table   
{   
border-top:1px   solid   black;   
border-left:1px   solid   black;   
cursor:default;   
}   
td   
{   
border-bottom:1px   solid   black;   
border-right:1px   solid   black;   
height:23px;   
}   
</STYLE>   
<SCRIPT   language="javascript">   
function   change(el)   
{   
var   x   =   el.rowIndex;   
el.style.backgroundColor   =   ++d[x]%2   ?   "#CCCCFF"   :   "#E1E9FD";   
}    
function   out(el)   
{   
var   x   =   el.rowIndex;   
if   (d[x]%2==0)   el.style.backgroundColor   =   "";   
}   
function   over(el)   
{   
var   x   =   el.rowIndex;   
if   (d[x]%2==0)   el.style.backgroundColor   =   "#E1E9FD";   
}   
</SCRIPT>   
</HEAD>   
<BODY>   
<TABLE   id="table1"   width="50%"   border="0"   cellpadding="0"   cellspacing="0">   
      <TR   style="background-color:#999999;   border-bottom:2px   solid   black;   height:25px"   align="center">   
          <TD   width="25%">one</TD>   
          <TD   width="25%">two</TD>   
          <TD   width="25%">three</TD>   
          <TD   width="25%">four</TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>   
      <TR   onMouseOver="over(this)"   onClick="change(this)"   onMouseOut="out(this)">   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
          <TD> </TD>   
      </TR>               
</TABLE>   
<script>var   d   =   new   Array(document.getElementById("table1").rows.length);for(i=0;i<d.length;i++)d[i]=0</script>   
</BODY>   
</HTML>

效果如下:

evangel_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java table逐行变色，点击变色

table table { border-top:1px solid black; border-left:1px solid black; cursor:default; } td { border-bottom:1px solid black; border-right:1px solid bl
复制链接

扫一扫