1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <meta name='description' content='表格的高级应用'>
  9.     <title>表格的高级应用</title>
  10.     <script src="../jquery.js"></script>
  11.     <script>
  12.         window.onload = function () {
  13.             var oTab = document.getElementById('tab1');
  14.  
  15.             for (var i=0; i<oTab.tBodies[0].rows.length; i++){
  16.                 if(i%2){
  17.                     oTab.tBodies[0].rows[i].style.background='red';
  18.                 }else {
  19.                     oTab.tBodies[0].rows[i].style.background='green';
  20.                 }
  21.             }
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26. <table id="tab1" border='1' width="500px">
  27.     <thead>
  28.         <tr>
  29.             <td>ID</td>
  30.             <td>gender</td>
  31.             <td>name</td>
  32.         </tr>
  33.     </thead>
  34.     <tbody>
  35.         <tr>
  36.             <td>01</td>
  37.             <td>male</td>
  38.             <td>John</td>
  39.         </tr>
  40.         <tr>
  41.             <td>02</td>
  42.             <td>female</td>
  43.             <td>Ann</td>
  44.         </tr>
  45.         <tr>
  46.             <td>03</td>
  47.             <td>female</td>
  48.             <td>Merry</td>
  49.         </tr>
  50.         <tr>
  51.             <td>04</td>
  52.             <td>female</td>
  53.             <td>Jessis</td>
  54.         </tr>
  55.         <tr>
  56.             <td>05</td>
  57.             <td>male</td>
  58.             <td>Jack</td>
  59.         </tr>
  60.         <tr>
  61.             <td>ID</td>
  62.             <td>男</td>
  63.             <td>Apollo</td>
  64.         </tr>
  65.     </tbody>
  66. </table>
  67.  
  68. </body>
  69. </html>

table表格隔行变色的更多相关文章

  1. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  5. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  6. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  9. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

随机推荐

  1. IntelliJ IDEA关闭代码自动补全

    关闭代码自动补全之后,可以使用[Ctrl]+[P]进行强制调出提示. [Editor]-[Code Completion]页里有个[Case sensitive completion],可以设置只第一 ...

  2. iphone开发-SQLite数据库使用

    我现在要使用SQLite3.0创建一个数据库,然后在数据库中创建一个表格. 首先要引入SQLite3.0的lib库.然后包含头文件#import <sqlite3.h> [1]打开数据库, ...

  3. 记C++课程设计--学生信息管理系统

                                                                                  C++课程设计--学生信息管理系统     ...

  4. 【音乐App】—— Vue-music 项目学习笔记：歌曲列表组件开发

    前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 当前歌曲播放列表 添加歌曲 ...

  5. 在windows搭建jenkins測试环境

    jenkins 搭建好开发环境必备之中的一个,简单易用,搭建測试平台非常有帮助,不知道的都能够了解一下 官网下载地址 http://jenkins-ci.org/ 我是下载window版本号的 安装有 ...

  6. js函数的Json写法

    https://zhidao.baidu.com/question/83401454.html

  7. iOS开发 - &quot;Cast from pointer to smaller type &#39;int&#39; loses information” 解决的方法

    今天要写一个联系人搜索算法. 百度了下, 在code4App中找到相关代码. 可是自己跑了下, 发现报错. 错误内容例如以下: "Cast from pointer to smaller t ...

  8. html的table使用div创建

    午休时间写了一个使用div创建table的案例 1.样式 <style> .table { display: table; } .tableRow { display: table-row ...

  9. 获取input光标的x和y轴

    http://blog.csdn.net/kingwolfofsky/article/details/6586029 index.html <!DOCTYPE html> <html ...

  10. Controller层返回字符串

    刚开始练习,有时候想让Controller层返回一个字符串,但是他却去寻找这个字符串名字的jsp页面,结果肯定会是404的,研究了一会才明白过来,如果Controller需要返回一个值的话,需要再方法 ...