表格应用--tBodies  tHead  tFoot  rows  cells

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    //    alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

   alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);

}

</script>

</head>

<body>

<table id="tab1" border="1" width="500">

    <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

    </thead>

    <tbody>

       <tr>

        <td>1</td>

        <td>blue</td>

        <td>23</td>

       </tr>

       <tr>

        <td>2</td>

        <td>张三</td>

        <td>24</td>

       </tr>

       <tr>

        <td>3</td>

        <td>李四</td>

        <td>25</td>

       </tr>

       <tr>

        <td>4</td>

        <td>王五</td>

        <td>26</td>

       </tr>

    </tbody>

</table>

</body>

隔行变色，选中高亮

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    var oldColor='';

    for(var i=0;oTab.tBodies[0].rows.length;i++)

    {

        oTab.tBodies[0].rows[i].onmouseover=function ()

        {

            oldColor=this.style.background;

            this.style.background='yellow';

        }

        oTab.tBodies[0].rows[i].onmouseout=function ()

        {

            this.style.background=oldColor;

        }

        if(i%2)

        {

            oTab.tBodies[0].rows[i].style.background='';

        }

        else

        {

            oTab.tBodies[0].rows[i].style.background='green';

        }

    }

}

</script>

</head>

<body>

<table id="tab1" border="1" width="500">

    <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

    </thead>

    <tbody>

       <tr>

        <td>1</td>

        <td>blue</td>

        <td>23</td>

       </tr>

       <tr>

        <td>2</td>

        <td>张三</td>

        <td>24</td>

       </tr>

       <tr>

        <td>3</td>

        <td>李四</td>

        <td>25</td>

       </tr>

       <tr>

        <td>4</td>

        <td>王五</td>

        <td>26</td>

       </tr>

    </tbody>

</table>

</body>

添加、删除一行，还有id号的处理（一般ID号不复用，删除了就不再用了）

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTab=document.getElementById('tab1');

    var oBtn=document.getElementById('btn1');

    var oName=document.getElementById('name');

    var oAge=document.getElementById('age');

    var id=oTab.tBodies[0].rows.length+1;

    oBtn.onclick=function ()

    {

        var oTr=document.createElement('tr');

        var oTd=document.createElement('td');

        oTd.innerHTML=id++;

        oTr.appendChild(oTd);

        var oTd=document.createElement('td');

        oTd.innerHTML=oName.value;

        oTr.appendChild(oTd);

        var oTd=document.createElement('td');

        oTd.innerHTML=oAge.value;

        oTr.appendChild(oTd);

        var oTd=document.createElement('td');

        oTd.innerHTML='<a href="javascript:;">删除</a>';

        oTr.appendChild(oTd);

        oTd.getElementsByTagName('a')[0].onclick=function ()

        {

            oTab.tBodies[0].removeChild(this.parentNode.parentNode);

        }

        oTab.tBodies[0].appendChild(oTr);

    }

}

</script>

</head>

<body>

姓名：<input id="name" type="text"/>

年龄：<input id="age" type="text"/>

<input id="btn1" type="button" value="添加"/>

<table id="tab1" border="1" width="500">

    <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

       <td>操作</td>

    </thead>

    <tbody>

       <tr>

        <td>1</td>

        <td>blue</td>

        <td>23</td>

        <td></td>

       </tr>

       <tr>

        <td>2</td>

        <td>张三</td>

        <td>24</td>

        <td></td>

       </tr>

       <tr>

        <td>3</td>

        <td>李四</td>

        <td>25</td>

        <td></td>

       </tr>

       <tr>

        <td>4</td>

        <td>王五</td>

        <td>26</td>

        <td></td>

       </tr>

    </tbody>

</table>

</body>

JS-DOM操作应用高级（一）的更多相关文章

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  5. 第七节 DOM操作应用-高级

    表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...

  6. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  7. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  8. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  9. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  10. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

随机推荐

  1. 我所使用的Linux软件集合

    自从2003-2004春节之际初次尝试使用Linux以来,至今已十年有余了.尤其是整个博士研究期间,坚持在Linux下开展学习与研究工作,前前后后试用了不少桌面环境.窗口管理器.终端程序以及其他应用软 ...

  2. javascript动画效果之多物体透明度

    html和css 仅为布局,需要注意的是filter对应的是老版本的ie浏览器透明度,而opacity对应的其他浏览器的透明度 filter: alpha(opacity: 50); opacity: ...

  3. Python安装coverage.py

    coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...

  4. 解决 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死锁问题

    在我们将站点从 ASP.NET + Windows 迁移至 ASP.NET Core + Linux 的过程中,目前遇到的最大障碍就是 —— 没有可用的支持 .NET Core 的 memcached ...

  5. 项目管理实践【四】Bug跟踪管理【Bug Trace and Management】

    首先,向大家说一声抱歉,这篇文章耽误了这么久才和大家见面.至于Bug的跟踪和管理的必要性和好处,我就不在这里说了,下面介绍几款Bug跟踪和管理的软件. 一.BugNET BugNET是一个非常优秀的开 ...

  6. Java创建对象的4种方式？

     [Java创建对象的4种方式?] 1)通过new语句实例化一个对象 2)通过反射机制创建对象 3)通过clone()方法创建一个对象  (复制) 4)通过反序列化方式创建对象

  7. c语言_头文件

    传统 C++ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include <assert.h> //设定插入点 #include <ctyp ...

  8. 《Windows驱动开发技术详解》之HelloDDK

    编写如下代码:

  9. windows做时间服务器，linux和windows时间同步

    找了很多的资料,都没有windows做时间服务,linux同步windows的时间的,最后自己找了一些软件,终于搞定了,写出来给大家共享,以免大家多走弯路 首先在http://www.meinberg ...

  10. MFC连接Access讲解（3合1） .

    方法一: 1.首先,要用#import语句来引用支持ADO的组件类型库(*.tlb),其中类型库可以作为可执行程序(DLL.EXE等)的一部分被定位在其自身程序中的附属资源里,如:被定位在msado1 ...