<!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. java基本类型（内置类型）取值范围

    例1: public class PrimitiveTypeTest { public static void main(String[] args) { // byte System.out.pri ...

  2. svn hook pre-commit

    #!/bin/bashexport LANG="zh_CN.UTF-8" #确保中文日志显示正常,便于统计日志REPOS="$1"TXN="$2&qu ...

  3. php实现 提取不重复的整数（编程题目能够最快的熟悉函数）

    php实现 提取不重复的整数(编程题目能够最快的熟悉函数) 一.总结 一句话总结:编程题目能够最快的熟悉函数. 1.字符串反转函数? 没有str_revserse,有arr_reverse,这里是st ...

  4. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...

  5. activiti自己定义流程之整合（五）：启动流程时获取自己定义表单

    流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么差别.因此也不多说.我们先看看列表页面以及相应的代码,然后在一步步说明点击启动button时怎样 ...

  6. Method and apparatus for loading a segment register in a microprocessor capable of operating in multiple modes

    A microprocessor contains an address generation unit, including a segment block, for loading descrip ...

  7. Java之泛型<T> T与T的用法

    <T> T表示返回值是一个泛型,传递啥,就返回啥类型的数据,而单独的T就是表示限制你传递的参数类型,这个案例中,通过一个泛型的返回方式,获取每一个集合中的第一个数据, 通过返回值<T ...

  8. JS----checked----checked选中和未选中的获取

    , allValue.length - 1); allValue = allValue.replace(/[ ]/g, ""); var checkedIds = allValue ...

  9. Hive分析窗体函数之NTILE，ROW_NUMBER，RANK和DENSE_RANK

    開始,依照顺序,生成分组内记录的序列–比方,依照pnum降序排列.生成分组内每天的pnum名次ROW_NUMBER() 的应用场景许多.再比方,获取分组内排序第一的记录等等. SELECT polno ...

  10. maven hadoop 3.x HADOOP_HOME and hadoop.home.dir are unset Not implemented by the WebHdfsFileSystem FileSystem implementation

    具体异常如下: 解决方案: 删除pom文件中的hadoop-core的依赖,原因:hadoop-core是1.x的产物,在2.x之后已经被hadoop-common取代,我配置的时候同时使用了这两个依 ...