<!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. mycat主从读写分离范例

    1.mycat二进制包安装 tar -zxvf Mycat-server-1.6.5-release-20180122220033-linux.tar.gzcd mycatmv mycat /opt/ ...

  2. Call to a member function assign() on a non-object;thinkphp中报错

    这个在自己写的类中 需要function __construct(){parent::__construct();}继承父类构造函数 当发生这个错误的时候,需要在构造函数中集成父类构造

  3. [Compose] 13. Lift into a Pointed Functor with of

    We examine the of function we've seen on a few types and discover it's the Pointed interface. Instea ...

  4. 微信开发学习日记（六）：weiphp框架

    最近重点在看weiphp这个开源的第三方微信公众平台框架. 在网上找微信资料,找到了这个.很早之前,就初步学习了Thinkphp和Onethink2个开源框架,当看到weiphp是用这2个框架开发的时 ...

  5. EM12C 安装及卸载 注意点整理

    版本号:  em12c 12.1.0.4          OS :  redhat 5.7 x86_64bit (CentOS6.2,測试过,当时因glibc*.i686包安装一直报错.所以放弃了) ...

  6. js实现表格配对小游戏

    js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...

  7. reflect（反射）了解一点点

    A a = new A() 这个代码在程序编译阶段,会自己主动定位到A类上,而且新建一个A的实例. 可是假设我们希望程序在执行时.动态的创建一个A的实例.此时程序仅仅知道要从名字叫A的类中创建一个实例 ...

  8. Linux硬件信息查询命令

    系统 uname -a              # 查看内核/操作系统/CPU信息 Linux hostname 2.6.18-128.el5 #1 SMP Wed Dec 17 11:41:38 ...

  9. Android核心功能开发SearchView使用的开发（代码共享）

    在Android上.搜索是一个核心的用户功能.用户可以搜索可用的任何数据,的内容是否存储在设备本身或者需要促进网络接入上.Android它提供了一个框架,为用户创造一个一致的搜索的搜索体验,它可以帮你 ...

  10. URLDecoder和URLEncoder的使用总结

    其实,这两个类的使用并不复杂,URLDecoder和URLEncoder它的作用主要是用于普通字符串和application/x-www-form-rulencoded MIME字符串之间的转换,一般 ...