js css table隔行显示颜色

最新推荐文章于 2022-03-24 21:25:16 发布

zhao6886

最新推荐文章于 2022-03-24 21:25:16 发布

阅读量481

点赞数

分类专栏： js css前台

本文链接：https://blog.csdn.net/zhao6886/article/details/23942383

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css前台

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
table{
    border:#0099FF 1px solid;
width:400px;
height:200px;
border-collapse: collapse;
}
table td,th{
border:#0099FF 1px solid;
    padding: 5px 0px 5px 0px;
}
table th{
    background-color:#00CCFF;
}
.one{
    background-color:#00FF66;
}
.two{
    background-color:#FFFF66;
}
.over{
    background-color:#669933;
}
   #click{
    background-color:#FF0000;
}
</style>
<script type="text/javascript">
function trColor() {
var tabNode = document.getElementsByTagName("table")[0];
     trNode = tabNode.rows;
var name;
for(i=0; i<trNode.length; i++) {
  if(i%2==1){
    trNode[i].className = "one";
  }
  else{
       trNode[i].className = "two";
  }
  trNode[i].onmouseover = function(){
           name = this.className;
     this.className = "over";
  }
  trNode[i].onmouseout = function(){

     this.className = name;
  }
  trNode[i].onclick = function(){
             var temp = this.getAttribute("id");
           if(temp == "click"){
     this.removeAttribute("id");
     }else{
               this.setAttribute("id","click");
     }
    // if(this.id == "click"){
    // this.id = "";
    // }else{
          //      this.id = "click";
    // }
  }
}
}
function over(tdNode){
     alert();
tdNode.className = "over";
}
onload = function(){
     trColor();
}
</script>
</head>

<body>
<table>
<tr>
   <th>电影名称</th>
   <th>电影介绍</th>
   <th>主演名单</th>
</tr>
<tr οnmοuseοver="over(this);">
   <td>金刚葫芦娃</td>
   <td>电影很不错哦</td>
   <td>李连杰甄子丹</td>
</tr>
<tr οnmοuseοver="over(this);">
   <td>金刚葫芦娃</td>
   <td>电影很不错哦</td>
   <td>李连杰甄子丹</td>
</tr>
<tr οnmοuseοver="over(this);">
   <td>金刚葫芦娃</td>
   <td>电影很不错哦</td>
   <td>李连杰甄子丹</td>
</tr>
<tr οnmοuseοver="over(this);">
   <td>金刚葫芦娃</td>
   <td>电影很不错哦</td>
   <td>李连杰甄子丹</td>
</tr>

</table>
</body>
</html>

zhao6886

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js css table隔行显示颜色

http://www.w3.org/TR/html4/loose.dtd"> New Document table{ border:#0099FF 1px solid; width:400px; height:200px; border-collapse: collapse; } table td,
复制链接

扫一扫