注意：就算代码中不包含<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. jsonrpc环境搭建和简单实例

    一.环境准备 下载需要的jar包和js文件,下载地址:https://yunpan.cn/cxvbm9DhK9tDq  访问密码 6a50 二.新建一个web工程,jsonrpc-1.0.jar复制到 ...

  2. C. Make It Equal

    链接 [http://codeforces.com/contest/1065/problem/C] 题意 给你n个高度hi的塔,让你把高的部分切掉,使得最后所有塔一样高,而且每次切的高度之和不大于k ...

  3. 《Linux及安全》课程实践二

    编译生成新内核 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展 ...

  4. MySQL主从复制配置遇到的部分问题

    网上配置教程很多,我也是参考其他人的教程完成的,主要遇到了以下几个问题,如果以后有人遇到相同的希望能够给大家写提示吧. 1.my.cnf文件配置 Master上的my.cnf中配置的server_id ...

  5. 第一个Sprint

    项目名字:四则运算APP 开发环境:java 团队名称:会飞的小鸟 团队成员:陈志棚  李炫宗   刘芮熔  徐侃  罗伟业 一.经过宿舍世纪讨论后我们剔除了一些不合理的设计,比如网站管理员这一部分在 ...

  6. Using Android Phone to recover SD card formatted with DD command under linux

    Using Android Phone to recover SD card formatted with DD command under linux 1. Formatted a sd card ...

  7. [转帖].NET Core 2.0 是您的最好选择吗？

    .NET Core 2.0 是您的最好选择吗? https://www.cnblogs.com/vipyoumay/p/7388371.html 1. NET Core 2.0 是您的最好选择吗? 1 ...

  8. Windows 聆听 简单使用体验

    1. 点击windows 按键 输入语音 按照操作 选择语音 并且读出那一段话. 2. 可以将windows 语音识别 添加到开始面板 3. 使用时 点击 该图标,然后点击麦克风按钮 聆听效果如图示 ...

  9. shell获取帮助

    一.內建命令与外部命令 1.內建命令 内建命令是 shell 程序的一部分,是一些比较简单的 Linux 系统命令,这些命令是写在bash源码的builtins里面的,由 shell 程序识别并在 s ...

  10. Angular $broadcast和$emit和$ond实现父子通信

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...