JS动态创建table

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            table{

                width: 500px;

                border-color: chartreuse;

                border-collapse: collapse;

            }

            table td{

                height: 40px;

            }

            #btn{

                width: 100px;

                height: 40px;

                color: #3399cc;

                font-size: 18px;

            }

            table input{

                width: 80px;

                height: 30px;

            }

        </style>

    </head>

    <body>

        <div id="box">

            <input type="button" value="create" id="btn"/>

        </div>

        <script src="../js/common.js"></script>

        <script src="../js/table.js"></script>

        <script>

            //获得按钮

            var btn = my$("btn");

            //注册事件

            btn.onclick = function () {

                //创建一个tr

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

                var table = getLastElementChild(box);

                table.tBodies[0].appendChild(tr);

                //遍历头部数据 创建td

                for(var i =0;i<headers.length-1;i++){

                    //创建td

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

                    //追加到tr中

                    tr.appendChild(td);

                    //在td中添加文本框

                    td.innerHTML = "<input type='text'/>"

                }

                //创建td

                td = document.createElement("td");

                //追加到tr中

                tr.appendChild(td);

                //在td中添加a标签 且不可跳转

                td.innerHTML = "<a href='javascript:;'>确定</a> <a href='javascript:;'>取消</a>";

                //找到取消a标签

                var cancel = getLastElementChild(td);

                //注册事件

                cancel.onclick = function () {

                    //点击之后删除tbody中的tr

                    table.tBodies[0].removeChild(tr);

                };

                //找到确定按钮

                var ensure = getFirstElementChild(td);

                //给去掉按钮注册事件

                ensure.onclick = function () {

                    //定义td遍历

                    var td1,td2,td3,td4;

                    //找到tr中的第一个td

                    td1 = getFirstElementChild(tr);

                    //找到tr中的第一个td的下一个兄弟子元素

                    td2 = getNextElementSibling(td1);

                    //找到tr中的第二个td的下一个兄弟子元素

                    td3 = getNextElementSibling(td2);

                    //找到tr中的第三个td的下一个兄弟子元素

                    td4 = getNextElementSibling(td3);

                    //找到tr中的第一个td中的第一个子元素的value值

                    var name = getFirstElementChild(td1).value;

                    //找到tr中的第一个td的下一个兄弟子元素中的第一个子元素的value值

                    var department = getFirstElementChild(td2).value;

                    //找到tr中的第二个td的下一个兄弟子元素的第一个子元素的value值

                    var age = getFirstElementChild(td3).value;

                    //找到tr中的第三个td的下一个兄弟子元素的第一个子元素的value值

                    var salary = getFirstElementChild(td4).value;

                    //判断文本框是否为空

                    if(name.length===0||department.length===0||age.length===0||salary.length===0){

                        alert("文本框不能为空!!!请重新输入!!");

                    }else{

                        //不为空将数据添加到数组中去

                        datas.push({"name":name,"department":department,"age":age,"salary":salary});

                        //先删除之前的table

                        box.removeChild(table);

                        //重新调用函数创建一个新的函数

                        createTable(box,headers,datas);

                    }

                };

            };

            //表头数据

            var headers = ["姓名", "部门", "年龄","工资","操作"];

            //数据

            var datas = [

                {"name":"马闯","department":"行政","age":"18","salary":2000+"(元)"},

                {"name":"马户","department":"后勤","age":"19","salary":3000+"(元)"},

                {"name":"马伦","department":"技术","age":"15","salary":19000+"(元)"},

                {"name":"马尧","department":"服务","age":"16","salary":4000+"(元)"},

                {"name":"马震","department":"管理","age":"17","salary":16000+"(元)"},

                {"name":"马云","department":"财务","age":"20","salary":5000+"(元)"}

            ];

            var box = my$("box");
　　　　　　　　//调用函数

            createTable(box,headers,datas);

        </script>

    </body>

</html>


 /**

     * Created by Administrator on 2016/6/11.

     */

    function createTable(parentNode,headres,datas){

        //创建表格

        var table = document.createElement("table");

        //将表格追加到父容器中

        parentNode.appendChild(table);

        //设置table的样式

        table.cellSpacing = 0;

        table.cellPadding = 0;

        table.border = "1px";

        //创建表头

        var thead = document.createElement("thead");

        //将标题追加到table中

        table.appendChild(thead);

        //创建tr

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

        //将tr追加到thead中

        thead.appendChild(tr);

        //设置tr的样式属性

        tr.style.height="50px";

        tr.style.backgroundColor = "lightgray";

        //遍历headers中的数据

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

            //创建th

            var th = document.createElement("th");

            //将th追加到thead中的tr中

            tr.appendChild(th);

            //将headers的数据找到对应的th放进去  此处 用到了setInnerText()函数 调用common.js

            setInnerText(th,headres[i]);

        }

        //创建tbodt

        createTbody(parentNode,table,datas);

    };

    function createTbody(parentNodes,table,datas){

        //创建tbody

        var tbody = document.createElement("tbody");

        //将tbody追加到table中

        table.appendChild(tbody);

        //设置tbody的样式属性

        tbody.style.textAlign = "center";

        //遍历得到数据源

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

            //获取没想数据

            var data =datas[i];

            //创建tr

            tr = document.createElement("tr");

            //将tr追加到tbody中

            tbody.appendChild(tr);

            //设置tbody中tr的属性

            tr.style.height="40px";

            //遍历对象的属性

            for(var key in data){

                //创建td

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

                //追加到tbody中的tr中

                tr.appendChild(td);

                //将得到的没项属性添加到每一个td中

                setInnerText(td,data[key]);

            }

            //创建操作列

            td = document.createElement("td");

            //追加到tr中

            tr.appendChild(td);

            //给td设置a标签

            td.innerHTML = "<a href='javaScript:;'>删除</a>"

            //注册点击事件

            //找到a标签

            var link = td.children[0];

            //设置a便签的属性index为1

            link.index = i;

            //注册事件

            link.onclick = function () {

                //得到当前a标签的索引值

                var index = this.index;

                //删除该索引值的项

                datas.splice(index,1);

                //删除table

                parentNodes.removeChild(table);

                //重新创建table

                createTable(parentNodes,headers,datas);

            };

            //判断tr隔行变色

            //鼠标移动上去高亮显示

                    if(i%2==0){

                        //奇数行

                        tr.style.backgroundColor = "pink";

                    }else{

                        //偶数行

                        tr.style.backgroundColor = "#B9FFCF";

                    }

                    //注册事件高亮显示

                    var bg;

                    //鼠标经过

                    tr.onmouseover = function () {

                        bg = this.style.backgroundColor;

                        this.style.backgroundColor = "#4BE1FF";

                    };

                    //鼠标离开

                    tr.onmouseout = function(){

                        this.style.backgroundColor = bg;

                    };

        }

    };

JS动态创建table的更多相关文章

JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
js基础例子动态创建table实例
<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...
用JS动态创建登录表单，报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
js动态创建样式: style 和 link
js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章有很多提供动态创建 ...
UEditor js动态创建和textarea中渲染【原】
UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...
oaf 动态创建table vo (转)
原文地址:如何动态创建table 需求: 因为系统中有几千个QA plan 但是不能手动创建几千个质量收集页面所有需要根据不同的plan 动态创建对应的质量收集页面. 但是创建tabel 都要绑 ...

随机推荐

C语言的本质（4）——浮点数的本质与运算
C语言的本质(4)--浮点数的本质与运算 C语言规定了3种浮点数,float型.double型和long double型,其中float型占4个字节,double型占8个字节,longdouble型长 ...
C#编程规范
C#编程规范 Version 1.0 目录第一章概述.... 4 规范制定原则.... 4 术语定义.... 4 Pascal 大小写.... 4 Camel 大小写.... 4 文件命名组织 ...
sql server操作2:查询数据库语句大全【转】
注:以下操作均建立在上篇文章sql Server操作1的数据基础之上一.实验目的熟悉SQL语句的基本使用方法,学习如何编写SQL语句来实现查询二.实验内容和要求使用SQL查询分析器查询数据,练 ...
微软Code Hunt答案（00-05）——沉迷娱乐的我
昨天看到微软出的网游Code Hunt.o(∩_∩)o...哈哈,还不好好玩一吧,个人感觉不是一个模块比一个模块难的,Code Hunt是按功能划分.所以不要怕自己做不来.由于不同人特长不一样. 像A ...
bootstarp(carousel)组件
##### 1.5.1.Bootstrap中轮播图插件叫作Carousel ##### 1.5.2.基本的轮播图实现 ```html <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须 ...
DML
DML(Data Manipulation Language 数据操控语言),使用insert.update.delete进行数据库的操作.DML一:插入语句标准的插入语句 insert into ...
Sizzle之tokenize
在Sizzle里,大体思路,当为复合选择器时,判断是否支持querySeletorAll,如果不支持则调用自写方法select. select的功能十分冗长,下面先分析tokenize 在tokeni ...
document.body is null
document.body is null:做前端的同学们对这个错误应该不陌生吧出现这个问题的原因是:你太着急了,document还没渲染到body呢,你就想调用了,当然会找不到了解决办法so e ...
基于lua+nginx的abtest系统
指定一个参数这个参数可以标识客户端唯一id的,比如用户id等拿到这个id根据系统的hash算法会hash出一个bucket,目前支持的桶总数为10 根据后台设定的map关系(redis或配置文件) ...
windows.h与winsock2.h的包含顺序
#define WIN32_LEAN_AND_MEAN #include <windows.h>

JS动态创建table

JS动态创建table的更多相关文章

随机推荐

热门专题