表格应用--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 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. 洛谷-小鱼会有危险吗-BOSS战-入门综合练习2

    题目描述 Description 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%.有个极其邪恶的猎人在距离A处右边s米的地方,安装了一个隐蔽的探测 ...

  3. 手动编译生成apk

    转载一篇介绍如何去手动编译生成apk的文章: http://jojol-zhou.iteye.com/blog/729254

  4. varnish屏蔽control+F5导致缓存失效

    刚刚接触Varnish缓存,对静态资源进行缓存.目前问题,当浏览器Control+F5刷新页面,导致缓存失效. 参照:http://zhangxugg-163-com.iteye.com/blog/1 ...

  5. 关于oracle数据库（3）

    show user ; 查看当前用户的名称 select * from tab;  查看当前用户有哪些表 删除用户 drop user jky cascade; //cascade; 意思是级联操作 ...

  6. lucene 简单搜索步骤

    1.创建IndexReader实例: Directory dir = FSDirectory.open(new File(indexDir)); IndexReader reader = Direct ...

  7. sql语句判断两个时间段是否有交集

    场景:  数据库有有两个字段.开始时间<startTime>,和结束时间<endTime>,指定一个时间段(a,b),a表示开始时间,b表示结束时间.看数据库中有没有与(a,b ...

  8. 向.net后端发送请求获取数据，在前端动态填充表格

    实现效果 实现步骤 通过Ajax请求的方式 1.在前端定义Table 2.通过Ajax向.net后端发送数据请求 3.在.net后端定义方法供前端调用,并返回所需的数据 4.通过构造字符串的方式,将后 ...

  9. CSSHack 兼容性

    史上最全的CSS hack方式一览    CSS hack技巧大全    Can i use CSS hack CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Fire ...

  10. android开发注意点

    一.Android编码规范 1.java代码中不出现中文,最多注释中可以出现中文 2.局部变量命名.静态成员变量命名 只能包含字母,单词首字母出第一个外,都为大写,其他字母都为小写 3.常量命名 只能 ...