注意：就算代码中不包含<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. Jmeter-使用Ultimate Thread Group插件来设置负载场景

    前言: Jmeter插件相关请移步:https://www.jianshu.com/p/130c7fddeddf 自定义线程组:jp@gc - Ultimate Thread Group,功能强大,可 ...

  2. vue element-ui 动态上传

    上传填写完毕的幼儿及体测数据文件,上传成功后会自动导入该文件的数据 <el-upload :action="UploadUrl()" :on-success="Up ...

  3. ULMFiT 阅读笔记

    ULMFiT 阅读笔记 概述 这篇文章从文本分类模型入手,主要提出了两点:一是预训练语言模型在大中小规模的数据集中都能提升分类效果,在小规模数据集中效果尤为显著.二是提出了多种预训练的调参方法,包括D ...

  4. java中定时执行任务

    现在项目中用到需要定时去检查文件是否更新的功能.timer正好用于此处. 用法很简单,new一个timer,然后写一个timertask的子类即可. 代码如下: package comz.autoup ...

  5. 第三个Sprint冲刺总结

    第三个Sprint冲刺总结 1.燃尽图 2.本阶段总结: 本阶段主要是对产品进行完善和美化,所以工作量不是很多.但要做精,做好并非是一件简单的事情.我们各组员都安排了各自的任务,如参考各行业的优秀ap ...

  6. Python入门：数据结构的4种基本类型

    数据结构:通俗点说,就是储存大量数据的容器.这里主要介绍Python的4种基本数据结构:列表.字典.元组.集合. 格式如下: 列表:list = [val1,val2,val3,val4],用中括号: ...

  7. Tools （StExBar vs Cmder）which can switch to command line window on context menu in windows OS

    https://tools.stefankueng.com/StExBar.html https://github.com/cmderdev/cmder

  8. Oracle11.2.0.1 升级Oracle11.2.0.4 后 listener 的端口改变需要处理

    1. 因为Oracle采取了异地升级 发现 Oracle的端口号发生了变化: 2. 如果之前的连接还需要用的话 需要禁用 dbhome1 里面的监听 只打开dbhome2的监听 并且修改 监听的端口号 ...

  9. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  10. 黑客又多一款喜爱工具：知名 Windows Phone 破解工具 WPinternals 开源了

    导读 Windows Phone 发布后,黑客 HeathCliff74(René Lergner)写了一个软件 WPinternals,利用它可以对 Windows Phone 进行破解,这使他成为 ...