注意：就算代码中不包含<tbody>标签，浏览器解析时也可能会自动添加，因此需要注意子元素的选择

表格操作用到的属性：

1、tHead

2、tBodies

3、tFoot

更为细致的有：

4、rows

5、cells

表格操作：

//从后台获取数据、隔行变色、删除整行
<!DOCTYPE>

<html>

<head lang="en">

    <meta charset="utf-8">

    <title>表格操作</title>

</head>

<body>

    <table id="tab" border="1px" width="100%">

        <thead>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

            <th>操作</th>

        </tr>

        </thead>

        <tbody></tbody>

    </table>

</body>

<script>

    window.onload=function(){

        var data=[

            {number:1,name:"leo1",sex:"男",age:17},

            {number:2,name:"leo2",sex:"男",age:15},

            {number:3,name:"leo3",sex:"男",age:14},

            {number:4,name:"leo4",sex:"女",age:18},

        ];

        var oTbody=document.getElementById("tab").tBodies[0];

        for(var i=0;i<data.length;i++){

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

            if(i % 2){

                oTr.style.background="#ccc";

            }

            else{

                oTr.style.background="#fff";

            }

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

            oTd.innerHTML=data[i].number;

            oTr.appendChild(oTd);

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

            oTd.innerHTML=data[i].name;

            oTr.appendChild(oTd);

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

            oTd.innerHTML=data[i].sex;

            oTr.appendChild(oTd);

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

            oTd.innerHTML=data[i].age;

            oTr.appendChild(oTd);

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

            var oA=document.createElement("a");

            oA.href="javascript:;";

            oA.innerHTML="删除";

            oTd.appendChild(oA);

            oTr.appendChild(oTd);

            oTbody.appendChild(oTr);

        }

        var oA=document.getElementsByTagName("a");

        for(var m=0;m<oA.length;m++){

            oA[m].onclick=function(){

                oTbody.removeChild(this.parentNode.parentNode);

                for(var i=0;i<document.getElementsByTagName("tr").length;i++){

                    if(i % 2){

                        oTr.style.background="#ccc";

                    }

                    else{

                        oTr.style.background="#fff";

                    }

                }

            }

        }

    }

</script>

</html>

 

DOM表格操作的更多相关文章

  1. Javascript:DOM表格操作

    需求说明: /* *需求说明: *获取元素:tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作,剩余表格重新计算,实现隔行变色 */ HTM ...

  2. dom 表格操作

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  4. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  5. javaScript之表格操作<一:新增行>

    DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...

  6. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  7. dom事件操作例题，电子时钟，验证码，随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  8. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  9. DOM样式操作

    CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...

随机推荐

  1. （第十二周）final预发布视频

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final阶段视频发布 平台:优酷 链接:http://v.youku.com/v_show/id_XMTg0 ...

  2. vue props 用法（转载）

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  3. 软件工程(GZSD2015)学生博客列表

    2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...

  4. 为什么要用Thrift

    Why Thrift, Why not HTTP RPC(JSON+gzip) https://stackoverflow.com/questions/9732381/why-thrift-why-n ...

  5. ASP.NET MVC自定义异常处理

    1.自定义异常处理过滤器类文件 新建MyExceptionAttribute.cs异常处理类文件

  6. DTW的原理及matlab实现（转载+整理）

    在大部分的学科中,时间序列是数据的一种常见表示形式.对于时间序列处理来说,一个普遍的任务就是比较两个序列的相似性. 在时间序列中,需要比较相似性的两段时间序列的长度可能并不相等,在语音识别领域表现为不 ...

  7. pandas函数应用

    1.管道函数 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang cha ...

  8. mysql学习笔记一 —— 数据的增删改查

    1.连接mysql mysql 直接回车(是以root身份,密码空,登陆的是本机localhost) [root@www mysql]# mysql -uroot -p123 -S /var/lib/ ...

  9. python之tkinter使用-二级菜单

    # 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...

  10. ansible系列6-用户管理

    第一种:新增用户 ansible host -m user -a "name=zhang shell=/bin/bash groups=admin,root append=yes home= ...