表格应用--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. .Net Core 常见问题整理

    1.安装时报0x80070490 找不到元素 这里应该是vs只装了web没有装c++ 下载一个 VC_redist.x64.exe 安装就行了 https://github.com/dotnet/co ...

  2. JQuery 阻止事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...

  3. 国外vps品牌vultr宣布100%可用，宕机加倍补偿

    全球知名的vps品牌vultr最近发狠招了,宣布所有vps服务器保证100%上线可用.如果出现宕机故障,提供加倍补偿方案.没有一家vps敢声称自己的产品100%可用,行业标准99.99%上线率已经是非 ...

  4. Openjudge-计算概论（A）-角谷猜想

    描述: 所谓角谷猜想,是指对于任意一个正整数,如果是奇数,则乘3加1,如果是偶数,则除以2,得到的结果再按照上述规则重复处理,最终总能够得到1.如,假定初始整数为5,计算过程分别为16.8.4.2.1 ...

  5. docker network

    前言:前面的部分一直都是单机跑docker,但实际生产环境不可能只用一台来跑.肯定会用到多台,因为他们都是内部私有ip,那么多台主机之间的容器如何通信?这个是个很头疼的问题!目前主流几种方法如下: 1 ...

  6. 2. Shell 传递参数

    1. 概要 我们可以在执行 Shell脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推-- #!/bin/bas ...

  7. document.domain的修改问题

    有时候,需要修改document.domain. 典型的情形:http://a.xxx.com/A.htm 的主页面有一个<iframe src="http://b.xxx.com/B ...

  8. html 任意表格

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />   ...

  9. hdu_4529_郑厂长系列故事——N骑士问题(状压DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4529 题意:中文,不解释 题解:状压DP,dp[i][j][k][s]表示第i行当前用了j个骑士,i- ...

  10. htaccess 实现网址缩短

    访问 :app.xxx.com/a 解析到:app.xxx.com/index.php/app/a <IfModule mod_rewrite.c> RewriteEngine on Re ...