<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var data = [

        {name:'小红',age:'26',sex:'女'},

        {name:'圆圆',age:'26',sex:'男'},

        {name:'小吕',age:'21',sex:'女'},

        {name:'小明',age:'30',sex:'女'},

    ];

    var otab = document.getElementById('tab1');

    var otbody = otab.tBodies[0];

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

    {

        var otr = document.createElement('tr');

        if( i % 2)

        {

            otr.style.background = '#fff';

        }

        else

        {

            otr.style.background = 'pink';

        }

        var otd = document.createElement('td');

        otd.innerHTML = data[i].name;

        otr.appendChild(otd);

        var otd = document.createElement('td');

        otd.innerHTML = data[i].age;

        otr.appendChild(otd);

        var otd = document.createElement('td');

        otd.innerHTML = data[i].sex;

        otr.appendChild(otd);

        var otd = document.createElement('td');

        otr.appendChild(otd);

        var oa = document.createElement('a');

        oa.innerHTML = '删除';

        oa.href = 'javascript:;';

        oa.onclick = function ()

        {

            otbody.removeChild(this.parentNode.parentNode);

            for(var i = 0; i < otbody.rows.length; i++)

            {

                if( i % 2)

                {

                    otr.style.background = '#fff';

                }

                else

                {

                    otr.style.background = 'pink';

                }

            }

        }

        otd.appendChild(oa);

        otbody.appendChild(otr);

    }

}

</script>

</head>

<body>

<table border="1" id="tab1" >

     <thead>

        <tr>

            <td>姓名</td>

            <td>年龄</td>

            <td>性别</td>

            <td>备注</td>

        </tr>

    </thead>

    <tbody>

    </tbody>

</table>

</body>

</html>

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

  1. DOM表格操作

    注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择 表格操作用到的属性: 1.tHead 2.tBodies 3.tFoot 更为细致的有: ...

  2. Javascript:DOM表格操作

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

  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. Android 的 ramdisk.img、system.img、userdata.img 作用说明，以及UBoot 系统启动过程

    首先通過編譯,先將android內核編譯成功.正常情況下,在目錄out/target.product/generic/(但是有的就沒有generic文件,如freescale和iriver:但是lon ...

  2. linux查看某个端口被占用

    如8003 端口 使用命令:netstat -nlptu |awk '{print $4,$7}' | grep 8003 [root[@bogon](/user/bogon) ~]# netstat ...

  3. java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.<init>(Ljava/lang/Class;)V

    相应我,是因为你SPRING MVC的包没有加全.你可以新建一个WEB项目.加入SPRING 3.0 的所有包.主要是WEB类的.就可以解决这个问题了.关键就是少包.特别是你的项目原来是SRPING ...

  4. rsync常用命令及格式

    rsync在同步文件夹内容这个工作上应用非常广泛,但是rsync本身命令还是比较复杂,本文总结一下: rsync = remote sync的简称 ,它 被用于在linux/unix系统中执行备份操作 ...

  5. 浅谈 Scala 中下划线的用途

    Scala 作为一门函数式编程语言,对习惯了指令式编程语言的同学来说,会不大习惯,这里除了思维方式之外,还有语法层面的,比如 underscore(下划线)就会出现在多种场合,令初学者相当疑惑,今天就 ...

  6. kafka迁移与扩容

    参考官网site: http://kafka.apache.org/documentation.html#basic_ops_cluster_expansion https://cwiki.apach ...

  7. Kafka源码中的Producer Record定义

    1.ProducerRecord 含义: 发送给Kafka Broker的key/value 值对 2.内部数据结构: -- Topic (名字) -- PartitionID ( 可选) -- Ke ...

  8. CocoStudio UI 编辑器的使用

    详细教程:http://www.cocoachina.com/bbs/read.php?tid=161567 Table of Contents 1 游戏中的 UI 1.1 基于 Cocos2d-x ...

  9. UVALive 4043 Ants 蚂蚁（二分图最佳完美匹配，KM算法）

    题意: 有n个蚂蚁n棵树,蚂蚁与树要配对,在配对成功的一对之间连一条线段,要求所有线段不能相交.按顺序输出蚂蚁所匹配的树. 思路: 这个题目真是技巧啊,不能用贪心来为每个蚂蚁选择最近的树,这样很可能是 ...

  10. 物联网操作系统HelloX V1.79发布公告

    经过HelloX开发团队近半年的努力,在HelloX V1.78版本基础上,增加许多功能特性,并对V1.78版本的一些特性进行了进一步优化之后,正式形成HelloX V1.79测试版本.经相对充分的测 ...