表格应用--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. TortoiseGit - pull 与 fetch

    Git的Pull其实是fetch与Merge两个命令的合并. 平时遇到的问题是,在本地分支进行了一些修改,准备提交.但是怕提交前有其他人push了新的代码.于是想在提交前,看看远程仓库上的log.这时 ...

  2. Arch声卡配置

    ALSA Utilities Install the alsa-utils package. This contains (among other utilities) the alsamixer a ...

  3. java实现UDP聊天---转载

    import java.io.*; import java.net.*; class Send implements Runnable { private DatagramSocket ds; pub ...

  4. ural 1353. Milliard Vasya's Function（背包/递归深搜）

    1353. Milliard Vasya's Function Time limit: 1.0 second Memory limit: 64 MB Vasya is the beginning ma ...

  5. .net dynamic动态加属性

    class Test : System.Dynamic.DynamicObject { public override bool TryGetMember(System.Dynamic.GetMemb ...

  6. CVE-2014-4115漏洞分析(2014.11)

    CVE-2014-4115漏洞分析 一.简介 该漏洞是由于Windows的Fastfat.sys组件在处理FAT32格式的硬盘分区存在问题.攻击者利用成功可导致权限提升. 影响的系统包括: Windo ...

  7. Linux手动搭建LAMP环境

    当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...

  8. sql身份证号查人数

    select a.*,b.item_name from (select sum(buy_num) num,nqh from (select substr(a.embed_dis_province,1, ...

  9. netsh命令之ip设置

    批处理.VBS实现自动设置IP.默认网关.DNS.WINS.IE代理的代码,需要的朋友可以参考下 因为公司有同事负责大连.沈阳两个城市,经常在两地来回走动,到每个城市后,都要自己手动更改相应的网络配置 ...

  10. 11--Python 备份文件程序

    最近看了下<A Byte of Python>, 看见一个非常有意思的程序,用python进行文件行备份的练习程序, 自己在机器上敲代码运行了一遍,结果出现了一个小问题,路径出错--&qu ...