隔行变色

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         window.onload=function(){
  8.             var oTab=document.getElementById('table1');
  9.  
  10.             for(var i=0;i<oTab.tBodies[0].rows.length;i++){
  11.  
  12.                 if(i%2){
  13.                     oTab.tBodies[0].rows[i].style.background='';
  14.                 }
  15.                 else{
  16.                     oTab.tBodies[0].rows[i].style.background='#ccc';
  17.                 }
  18.             }
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23. <table id="table1" border="1" width="300" align="center">
  24.     <thead>
  25.     <td>id</td>
  26.     <td>姓名</td>
  27.     <td>年龄</td>
  28.     </thead>
  29.     <tbody>
  30.     <tr>
  31.         <td>1</td>
  32.         <td>张三</td>
  33.         <td>25</td>
  34.     </tr>
  35.     <tr>
  36.         <td>2</td>
  37.         <td>李四</td>
  38.         <td>20</td>
  39.     </tr>
  40.     <tr>
  41.         <td>3</td>
  42.         <td>王五</td>
  43.         <td>53</td>
  44.     </tr>
  45.     <tr>
  46.         <td>4</td>
  47.         <td>张伟</td>
  48.         <td>23</td>
  49.     </tr>
  50.  
  51.     </tbody>
  52. </table>
  53. </body>
  54. </html>

鼠标移入高亮显示

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         window.onload=function(){
  8.             var oTab=document.getElementById('table1');
  9.             var oldColor='';
  10.            for(var i=0;i<oTab.tBodies[0].rows.length;i++){
  11.                oTab.tBodies[0].rows[i].onmouseover=function(){
  12.                    oldColor=this.style.background;
  13.                    this.style.background='green';
  14.                }
  15.                oTab.tBodies[0].rows[i].onmouseout=function(){
  16.                    this.style.background=oldColor;
  17.                }
  18.  
  19.                if(i%2){
  20.                    oTab.tBodies[0].rows[i].style.background='';
  21.                }
  22.                else{
  23.                    oTab.tBodies[0].rows[i].style.background='#ccc';
  24.                }
  25.            }
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30. <table id="table1" border="1" width="300" align="center">
  31.     <thead>
  32.     <td>id</td>
  33.     <td>姓名</td>
  34.     <td>年龄</td>
  35.     </thead>
  36.     <tbody>
  37.     <tr>
  38.         <td>1</td>
  39.         <td>张三</td>
  40.         <td>25</td>
  41.     </tr>
  42.     <tr>
  43.         <td>2</td>
  44.         <td>李四</td>
  45.         <td>20</td>
  46.     </tr>
  47.     <tr>
  48.         <td>3</td>
  49.         <td>王五</td>
  50.         <td>53</td>
  51.     </tr>
  52.     <tr>
  53.         <td>4</td>
  54.         <td>张伟</td>
  55.         <td>23</td>
  56.     </tr>
  57.  
  58.     </tbody>
  59. </table>
  60. </body>
  61. </html>

添加一行

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var oTab=document.getElementById('tab1');
  10.  
  11.     var oBtn=document.getElementById('btn1');
  12.     var oName=document.getElementById('name');
  13.     var oAge=document.getElementById('age');
  14.  
  15.     oBtn.onclick=function ()
  16.     {
  17.         var oTr=document.createElement('tr');
  18.  
  19.         var oTd=document.createElement('td');
  20.         oTd.innerHTML=oTab.tBodies[0].rows.length+1;    //?
  21.         oTr.appendChild(oTd);
  22.  
  23.         var oTd=document.createElement('td');
  24.         oTd.innerHTML=oName.value;
  25.         oTr.appendChild(oTd);
  26.  
  27.         var oTd=document.createElement('td');
  28.         oTd.innerHTML=oAge.value
  29.         oTr.appendChild(oTd);
  30.  
  31.         oTab.tBodies[0].appendChild(oTr);
  32.     };
  33. };
  34. </script>
  35. </head>
  36.  
  37. <body>
  38. 姓名：<input id="name" type="text" />
  39. 年龄：<input id="age" type="text" />
  40. <input id="btn1" type="button" value="添加" />
  41. <table id="tab1" border="1" width="500">
  42.     <thead>
  43.         <td>ID</td>
  44.         <td>姓名</td>
  45.         <td>年龄</td>
  46.     </thead>
  47.     <tbody>
  48.         <tr>
  49.             <td>1</td>
  50.             <td>Blue</td>
  51.             <td>27</td>
  52.         </tr>
  53.         <tr>
  54.             <td>2</td>
  55.             <td>张三</td>
  56.             <td>23</td>
  57.         </tr>
  58.         <tr>
  59.             <td>3</td>
  60.             <td>李四</td>
  61.             <td>28</td>
  62.         </tr>
  63.         <tr>
  64.             <td>4</td>
  65.             <td>王五</td>
  66.             <td>25</td>
  67.         </tr>
  68.         <tr>
  69.             <td>5</td>
  70.             <td>张伟</td>
  71.             <td>24</td>
  72.         </tr>
  73.     </tbody>
  74. </table>
  75. </body>
  76. </html>

DOM基础3的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  10. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. apache ab下载测试

    http://httpd.apache.org/docs/2.0/programs/ab.html-->http://httpd.apache.org/docs/current/platform ...

  2. Java大数处理类：BigInteger类和BigDecimal类

    当我们要处理非常大的数据时,平常用的数据类型已不足以表示,在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,这两个类在理论上只要计算机内存足够大就能够表示无线 ...

  3. Swift - @IBDesignable和@IBInspectable

    前言: 用storyboard/xib搞项目时,一些属性在Interface Builder上时无法设置,比如常用的layer的一些属性cornerRadius,borderColor等 (有时没必须 ...

  4. UISplitViewController - iPad分屏视图控制器

    UISplitViewController - 分屏视图控制器 概述 UISplitViewController 是一个容器vc, 展示一个 master-detail(主-详(从))界面. 主视图改 ...

  5. 数据结构之AVL树

    AVL树是高度平衡的而二叉树.它的特点是:AVL树中任何节点的两个子树的高度最大差别为1. 旋转 如果在AVL树中进行插入或删除节点后,可能导致AVL树失去平衡.这种失去平衡的可以概括为4种姿态:LL ...

  6. jquery.query.js 插件（示例及简单应用）

    帮助文档 var url = location.search; > "?action=view&section=info&id=123&debug&te ...

  7. HTTP 请求头中的 X-Forwarded-For

    https://imququ.com/post/x-forwarded-for-header-in-http.html

  8. eclipse中的任务标记(TODO、FIXME、XXX)

    eclipse Task Tags: TODO -用来提醒该标识处的代码有待返回继续编写.更新或者添加.该标签通常在注释块的源文件顶部. FIXME -该标签用来提醒你代码中存在稍后某个时间需要修改的 ...

  9. 【转载】 Pyqt QStackedWidget堆栈窗体

    转载地址: http://blog.csdn.net/a649518776/article/details/6636578 下面用代码实现上面窗口的设计 # -*- coding: utf-8 -*- ...

  10. python 之socket 网络编程

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...