CSS-相关练习1-表格实现奇数行和偶数行自行判断设置不同的背景颜色

来源：互联网发布：网络谣传实例编辑：程序博客网时间：2024/06/05 11:37
/*   *Copyright (c) 2017，烟台大学计算机学院   All rights reserved.   *文件名称：关于HTML的练习  *作    者：张晴晴   *完成日期：2017年11月25日   *版 本 号：v1.0  *   *问题描述：HTML5-JavaScript  *输入描述： 无  *程序输出： 无  */<!doctype html><html><head><meta charset="utf-8"><title>第一道题目</title><script>function upcolor(){var table=document.getElementById("mytable");for(var i=0;i<table.rows.length;i++){if(i%2!=0){//判断的为偶数行，从第2行开始起，偶数行设定那个颜色是蓝色table.rows[i].style.background='#96DEED';}}for(var j=2;j<table.rows.length;j++){if(j%2==0){//判断的为偶数行，偶数行设定那个颜色是蓝色(从第三行开始)table.rows[j].setAttribute('style','backgroung-color:#D3F3F5');}}}</script></head><body onLoad="upcolor()"><table width="200" border="1" id="mytable">  <tr bgcolor="#0080C0">    <th>Name</th>    <th>Class</th>    <th>Birthday</th>    <th>Constellation</th>    <th>Mobile</th>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr>  <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>  </tr></table></body></html>
运行结果：
阅读全文
0 0