网页表格颜色

来源:互联网 发布:谭浩强c语言经典入门 编辑:程序博客网 时间:2024/05/22 01:38
 

<html>

  <head>

  <title>双色表格</title>

  <style type="text/css">

  <!--

  table {

  border:solid 1px black;

  text-align:center;

  border-spacing:0px;

  }

  th,td {

  border:solid 1px black;

  width:100px;

  }

  -->

  </style>
<script type="text/javascript" >

  function color() {

  //把表头设为紫色

  var th = document.getElementById("th");

  th.style.background = "violet"

  //1.得到所有<tr>元素

  var trs = document.getElementsByTagName("tr");

  var i;

  for(i = 1; i <trs.length; i++) {

  //2.改变<tr>元素的背景颜色

  if(i % 2 == 0) {

  trs[i].style.background = "yellow";

  } else {

  trs[i].style.background = "olive";

  }

  }

  }

  window.onload = color;

  </script>

  </head>

  <body>

  <center>

  <table>

  <tr id="th">

  <th>姓名</th>

  <th>科目</th>

  <th>成绩</th>

  </tr>

  <tr>

  <td>张三</td>

  <td>语文</td>

  <td>90</td>

  </tr>

  <tr>

  <td>张三</td>

  <td>数学</td>

  <td>87</td>

  </tr>

  <tr>

  <td>李四</td>

  <td>数学</td>

  <td>68</td>

  </tr>

  <tr>

  <td>王五</td>

  <td>英语</td>

  <td>76</td>

  </tr>

  </table>

  </center>

  </body>

  </html>

原创粉丝点击