<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
    <script type="text/javascript">
        var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
        //根据键值对创建表格
        onload = function () {
            document.getElementById('btn').onclick = function () {

                //创建一个表格
                var tbObj = document.createElement('table');
                tbObj.border = '1'; //边框
                //根据键值对的个数创建行
                for (var item in dic) {

                    //创建行
                    var trObj = document.createElement('tr');
                    //创建单元格
                    var tdObj1 = document.createElement('td');
                    if (typeof (tdObj1.innerText) == 'string') {//检测
                        tdObj1.innerText = item; //显示文本
                    } else {
                        tdObj1.textContent = item;
                    }

                    //创建单元格
                    var tdObj2 = document.createElement('td');
                    tdObj2.innerHTML = '<a href="' + dic[item] + '">' + item + '</a>';
                    //单元格添加到行中
                    trObj.appendChild(tdObj1);
                    trObj.appendChild(tdObj2);

                    //行添加到表中
                    tbObj.appendChild(trObj);
                }
                //把表格添加到body中
                document.body.appendChild(tbObj);
            };
        };
    </script>
</head>
<body>
    <input type="button" value="创建表格" id="btn"/>
</body>

</html>

兼容写法

<script type="text/javascript">

        var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };

        onload = function () {

            document.getElementById('btnCreate').onclick = function () {

                //创建表格
                var tbObj = document.createElement('table');
                tbObj.border = '1';
                //创建行和列
                for (var key in dic) {
                    //根据表创建行
                    var trObj = tbObj.insertRow(-1);
                    //根据行创建列
                    var tdObj1 = trObj.insertCell(-1);
                    tdObj1.innerText = key;
                    var tdObj2 = trObj.insertCell(-1);
                    tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
                }
                //添加到body中
                document.body.appendChild(tbObj);

            };
        };

js动态创建表格的更多相关文章

  1. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. js动态创建表格------Day59

    刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...

  3. js动态创建表格方法

    window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...

  4. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  5. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  6. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  7. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. jquery动态创建表格

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

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

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

随机推荐

  1. Qt5 编译 & 打包依赖dll发布

    十年前学C++的时候,无聊到把windows 文件夹下几乎所有的*.dll 都看过一遍.偶尔在程序运行时看到缺少 *.dll 的提示,都会直接找出来解决. 随着“开发平台”和“编译器”版本的逐年升级, ...

  2. Oracle列加密

    加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...

  3. 每天一个JavaScript实例-处理textarea中的字符成每一行

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  5. head first c 笔记&lt;3&gt; 之做一件事并把它做好

    1.标准输入.输出与重定向 scanf()和printf()分别为标准输入输出.默认的会从键盘得到数据,在显示器输出数据,是fscanf()和fprintf()函数的特例. 我们也能够用重定向来改变默 ...

  6. Oracle数据库零散知识02

    15,函数的创建,要求必须有返回值,必须在语句中调用,需要多个返回值时,使用out参数类型,在user_procedures表中查询属性,在user_source表中查询源代码,创建示例: CREAT ...

  7. SQL生成n位随机字符串

    --1.随着newid() go --创建一个视图(因为不能在功能直接用于newid()) create view vnewid as select newid() N'MacoId'; go --创 ...

  8. 征服OA 飞鱼工作流程的在线培训课程（两）HTML形成基于

    表HTML的重要作用,等效混凝土框架建筑的行,于div在此之前流行.是否所有形式的世界.在角色表页面主要是针对页面布局和定位.通过整合人才规划表设计出合理的页面布局. 当然.更重要的是,存在是表示数据 ...

  9. UVA 1428 - Ping pong(树状数组)

    UVA 1428 - Ping pong 题目链接 题意:给定一些人,从左到右,每一个人有一个技能值,如今要举办比赛,必须满足位置从左往右3个人.而且技能值从小到大或从大到小,问有几种举办形式 思路: ...

  10. 全文检索（elasticsearch入门）

    Elasticsearch篇: Elasticsearch是一个采用java语言开发的,基于Lucene构造的开源,分布式的搜索引擎. 设计用于云计算中,能够达到实时搜索,稳定可靠. Elastics ...