js css table隔行显示颜色_js table 隔行显示-CSDN博客

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

本文介绍了一个使用HTML、CSS和JavaScript实现的交互式表格案例，包括行颜色切换、鼠标悬停效果及点击高亮等功能。通过简单的代码示例，展示了如何为网页表格添加美化效果和互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>