<!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. 体验ArcGIS9.2的历史库功能

    转自原文 体验ArcGIS9.2的历史库功能 ESRI公司于2006年11月9日全球同步发布了历史上重要的软件版本ArcGIS9.2,在该版本中,主要新增了以下四大功能(ESRI田昌莲): 第一大新功 ...

  2. Java中String推断相等equals与==的差别以及StringBuilder的equals

    Java中String类型具有一个equals的方法能够用于推断两种字符串是否相等,可是这样的相等又与运算符==所推断的"相等"有所不同,接下来进行分析,结论由程序进行验证 Str ...

  3. [Javascript] Case insensitive sorting for string arrays

    We look at the default Array.prototype.sort behavior and discuss how you can do case insensitive str ...

  4. Android Notification如何显示表情？

    遇到这种分析用什么实现的,肯定要祭出大杀器Android Device Monitor(AS在Tools->Android)打开之后,选中连接的设备,然后点击小手机图标,即可导出UI层次图.咱们 ...

  5. 蓝牙简单配对（Simple Pairing）协议及代码流程简述

    kangear注: 文章转自:http://blog.csdn.net/myxmu/article/details/12217135 原文把图给搞丢了.可是文章太好了,这个时候我就发挥多年的Googl ...

  6. 剔除list中相同的结构体数据

    剔除list中相同的结构体数据,有三个思路:1.两层循环,逐个比较 2.使用set容器来剔除 3.使用unique方法去重 // deduplication.cpp : 定义控制台应用程序的入口点. ...

  7. linux桥接模式下配置静态ip

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79494993 一:桥接模式 VMware桥接模式,也就是将虚拟机的虚拟网络适配器与主机的 ...

  8. luogu 3939 数颜色 - STL(vector)

    传送门 分析: 虽然颜色种类很多,但是所有颜色个数之和n是一定的,这时候就可以使用vector对每个颜色维护一个坐标集合,空间只占n个. 对于查询L,R:直接一行: upper_bound(col[c ...

  9. .net core ——微服务内通信Thrift和Http客户端响应比较

    原文:.net core --微服务内通信Thrift和Http客户端响应比较 目录 1.Benchmark介绍 2.测试下微服务访问效率 3.结果 引用链接 1.Benchmark介绍 wiki中有 ...

  10. nil和Nil和NULL的判断

    ,nil和Nil和NULL的判断 开 发过程中,我们通过http请求,后台返回json数据,而有时数据里某一字段的值为null-,然后我们把此值赋值给 NSArray,NSdictionary,或是N ...