<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<style>

    #form1 {

        width: 480px;

        border: 1px solid #eee;

        border-radius: 5px;

        margin: 30px auto;

        padding: 10px;

        line-height: 30px;

        position: relative;

    }

    #tab1 {

        width: 500px;

        margin: 30px auto;

        border-collapse: collapse;

    }

    th, td {

        border: 1px solid #000;

        padding: 5px;

    }

    tr {

        cursor: pointer;

    }

    tbody tr td:first-child {

        text-align: center;

    }

    input[type="checkbox"] {

        width: 15px;

        height: 15px;

    }

    input[type="button"] {

        position: absolute;

        right: 10px;

        bottom: 10px;

    }

    #div1 {

        position: relative;

        width: 480px;

        padding: 10px;

        margin: 0 auto;

    }

</style>

<script type="text/javascript">

    function getChecked(form,name)

    {

        var arr = [];

        for (var i = 0; i < form[name].length; i++)

        {

            if(form[name][i].checked)

            {

                arr.push(form[name][i].value)

            }

        }

        if(form[name][0].type == 'radio')

        {

            return arr[0];

        }

        if(form[name][0].type == 'checkbox')

        {

            return arr;

        }

    };

</script>

<script type="text/javascript">

window.onload = function ()

{

    var data = [

    {'name': '赵一', 'sex': '男', 'age': '35'},

    {'name': '钱二', 'sex': '女', 'age': '28'},

    {'name': '孙三', 'sex': '男', 'age': '15'},

    {'name': '李四', 'sex': '男', 'age': '48'},

    {'name': '周五', 'sex': '男', 'age': '36'},

    {'name': '武六', 'sex': '女', 'age': '49'},

    {'name': '郑七', 'sex': '女', 'age': '75'},

    {'name': '王九', 'sex': '男', 'age': '17'},

    ];

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

    var obody = otab.tBodies[0];

    var oform = document.getElementById('form1');

    var oall = document.getElementById('checkAll');

    var odelet = document.getElementById('delete');

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

    {

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

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

        otd.innerHTML = '<input type="checkbox">'

        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);

        obody.appendChild(otr);

        colorline();

    }

    checkbox();

    oform.add.onclick = function ()

    {

        arr = [];

        arr[0] = oform.name.value;

        arr[1] = getChecked(oform,'sex');

        arr[2] = oform.age.value;

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

        {

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

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

            otd.innerHTML = '<input type="checkbox">'

            otr.appendChild(otd);

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

            {

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

                otd.innerHTML = arr[i];

                otr.appendChild(otd);

            }

        }

        obody.appendChild(otr);

        oform.reset();

        colorline();

        checkbox();

    };

    function colorline()

    {

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

        {

            if(i%2)

            {

                obody.rows[i].style.background = '#fff';

            }

            else

            {

                obody.rows[i].style.background = 'pink';

            }

        }

    };

    function checkbox()

    {

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

        {

            obody.rows[i].onclick = function ()

            {

                this.cells[0].children[0].checked = this.cells[0].children[0].checked == false?true:false;

                check();

            }

            obody.rows[i].cells[0].children[0].onclick = function ()

            {

                this.checked = this.checked == false ? true:false;

                check();

            }

        }

    }

    otab.tHead.onclick = function ()

    {

        oall.checked = oall.checked == false ? true: false;

        checkall();

    };

    oall.onclick = function ()

    {

        this.checked = this.checked == false ? true:false;

        checkall();

    }

    function checkall()

    {

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

        {

            obody.rows[i].cells[0].children[0].checked = oall.checked;

        }

    };

    function check()

    {

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

        {

            if(!obody.rows[i].cells[0].children[0].checked)

            {

                oall.checked = false;

                return;

            }

        }

        oall.checked = true;

    }

    odelet.onclick = function ()

    {

        oall.checked = false;

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

        {

            if(obody.rows[i].cells[0].children[0].checked)

            {

                obody.removeChild(obody.rows[i])

                i--;

            }

        }

        colorline();

    }

}

</script>

</head>

<body>

    <form id="form1">

        请输入姓名：<input type="text" name="name"><br>

        请选择性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>

        请输入年龄：<input type="text" name="age"><br>

        <input type="button" value="添加到表格" name="add">

    </form>

    <table id="tab1">

        <thead>

            <tr>

                <th width="20%"><input type="checkbox" id="checkAll"  id="checkAll"/> 全选</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody></tbody>

    </table>

    <div id="div1">

        <input type="button" value="删除所选行" id="delete">

    </div>

</body>

</html>

dom 动态生产表格的更多相关文章

  1. DOM动态添加表格

    var table=document.createElement("table"); table.border=1; var b=document.createElement(&q ...

  2. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  3. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  4. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  5. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  7. js如何实现动态在表格中添加标题和去掉标题？

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  8. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. 【uva】1220 Party at Hali-Bula

    1. 题目描述公司里有$n, n \in [1, 200]$个人,他们间的关系构成树状结构.除老板外,每个员工都有唯一一个直属上司,要求从中选择尽量多的人,但是不能同时选择员工和他的直属上司,问最多能 ...

  2. 单元测试之道（使用NUnit）

    首先来看下面几个场景你是否熟悉 1.你正在开发一个系统,你不断地编码-编译-调试-编码-编译-调试……终于,你负责的功能模块从上到下全部完成且编译通过!你长出一口气,怀着激动而 又忐忑的心情点击界面上 ...

  3. [HIHO1323]回文字符串（区间dp）

    题目链接:http://hihocoder.com/problemset/problem/1323 思路:区间dp,按照区间长度枚举所有区间和区间的起始位置.这时也可获取到区间的末位,比对这两个字符是 ...

  4. [HIHO1039]字符消除(字符串，枚举，模拟)

    题目链接:http://hihocoder.com/problemset/problem/1039 思路:枚举所有字符更新的位置和ABC三种修改方案,之后再模拟消除规则,一步一步去消除.直到无法消除, ...

  5. Qt之QHeaderView自定义排序（获取正确的QModelIndex）

    简述 前几节中分享过关于自定义排序的功能,貌似我们之前的内容已经可以很好地解决排序问题了,但是,会由此引发一些很难发现的问题...比如:获取QModelIndex索引错误. 下面,我们先来实现一个整行 ...

  6. 一个简单的ORM制作(CURD操作类)

    SQL执行类 CURD操作类 其他酱油类 此篇是为上篇文章填坑的,不知道上篇砸过来的砖头够不够,不够的话请大家继续砸. CURD操作类负责将用户提供的条件转换为SQL语句,并提供给IHelper执行, ...

  7. Cocoa & Cocoa Touch概念

    Application Kit框架包括广泛的类和方法,它们用来开发交互式图形应用程序,使得开发文本/菜单/工具栏/表/文档/剪贴板和窗口之类的过程变得十分简便.在Mac OSX操作系统中,术语coco ...

  8. Java 图片提取RGB数组 RGBOfCharMaps (整理)

    package demo; /** * Java 图片提取RGB数组 RGBOfCharMaps (整理) * 声明: * 和ImageCombining配合使用的工具,这里是提取图片的R.G.B生成 ...

  9. HDU 5384 Danganronpa （Trie树）

    题意:给出两个集合S和T,集合中每个元素是个字符串,而T集合中任一元素都是个子弹,可以打S中的任一怪物,如果子弹是怪物的子串,那么才有伤害值1,若在怪物中出现多次,次数为该子弹打到该怪物的伤害值.每个 ...

  10. 20160128.CCPP体系详解(0007天)

    以下内容有所摘取,进行了某些整理和补充 论浮点数的存储原理:float浮点数与double浮点数的二进制存储原理–>阶码 浮点数转二进制 1.整数int类型和浮点数float类型都是占用4个字节 ...