表格应用--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. LeetCode OJ 64. Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  2. 局域网iis添加主机头

    局域网上用主机头访问不像外网,直接设置主机头就行了, 在局域网设置了主机头还要修改host文件 打开host快捷的方法: win7在win+r运行里面运行C:\Windows\System32\dri ...

  3. XCode debug中添加查找debug和控制台的办法

    我们每一次编码完成后紧接着便是编译运行起来,看看程序运行的结果是否达到了我们的预期,此时,我们离不开控制台给我们输出必要的信息,为此, 当程序跑起来时,我们的控制台遍自己弹出来,这是不是蛮好的?  又 ...

  4. windows service and process 的关系

    1.查询windows 对应的服务 sc query > 1.txt notepad 1.txt 2.查询对应的进程信息 tasklist /m > tasks.txt notepad t ...

  5. perl中的pack与unpack

    这个pack, unpack在 "perl语言编程" 有介绍 看起来很复杂 #把一个字符串转为十六进制格式 my $source = 'abcd'; unpack('H*', $s ...

  6. 个人项目中的WCF使用

    今天闲着无事,给大家分享一下我的一个项目中WCF的使用.我这项目使用的是Silverlight,至于其他类型的使用方法也是一样的. 1.建立一个Silverlight带Web项目的解决方案. 2.在w ...

  7. Minigui开发之遥控控制逻辑算法

    引言 在开发公司的minigui产品时,需要用遥控器来切换显示屏上的图标和控件,这就涉及到一个问题,如何获得下一个选中的图标或控件呢? 解决思路 利用每个控件自身的ID号,建立一张类似矩阵的表,用坐标 ...

  8. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  9. 使用 VirtualBox 虚拟机在电脑上运行 Android 4.0 系统，让电脑瞬间变安卓平板

    Ref: http://www.iplaysoft.com/android-v4-ics-for-virtualbox.html 随着 Android 手机的各种软件应用越来越多,很多没有购买的朋友都 ...

  10. LoadRunner学习知多少--IP欺骗使用

    使用IP欺骗功能时,需要将系统防火墙,杀毒软件关闭(如果有影响的话) 一.为什么要设置IP欺骗 1. 当某个IP的访问过于频繁,或者访问量过大时,服务器会拒绝访问请求,这时候通过IP欺骗可以增加访问频 ...