<!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. ios开发利用AFN检测网络状态

    AFNetworkReachabilityManager *manager = [AFNetworkReachabilityManager sharedManager]; [manager setRe ...

  2. strong & weak 的理解

    import "ViewController.h" @interface ViewController () /*weak*/ @property (nonatomic,weak) ...

  3. 摘录-解压版mysql配置(版本5.7)

    1.下载解压2.创建my.ini文件基础配置:(注意编码必须为ANSI)#代码开始[Client]# 设置mysql客户端默认字符集default-character-set=utf8[mysqld] ...

  4. 卷积神经网络Lenet-5实现

    卷积神经网络Lenet-5实现 原文地址:http://blog.csdn.net/hjimce/article/details/47323463 作者:hjimce 卷积神经网络算法是n年前就有的算 ...

  5. 编写Linux中sh文件执行时出现莫名字符的问题

    今天在项目中需要编写一个sh,执行一些初始化操作,然后调取原来的执行文件,但是我在操作中主要到了首行需要加入#!/bin/sh 的表达式,但是在执行时总是报错,原因是每次执行,表达式后边都会添加一个莫 ...

  6. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  7. hadoop 3.x Could not find or load main class org.apache.hadoop.mapreduce.v2.app.MRAppMaster

    启动hdfs后执行share目录中自带的mapreduce程序时报如下错误 找到$HADOOP_HOME/etc/mapred-site.xml,增加以下配置 <property> < ...

  8. Starting MySQL.. ERROR! The server quit without updating PID file (/usr/local/mysql/data/vm10-0-0-19

    输入:service mysqld start 报错: Starting MySQL.. ERROR! The server quit without updating PID file (/usr/ ...

  9. Android四个基本组件（2）之Service 服务与Content Provider内容提供商

    一.Service 维修: 一Service 这是一个长期的生命周期,没有真正的用户界面程序,它可以被用于开发如监视类别节目. 表中播放歌曲的媒体播放器.在一个媒体播放器的应用中.应该会有多个acti ...

  10. 获取全局上下文(getApplicationContext)_创建Shared Preference工具类_实现自动登录

    获取全局上下文(getApplicationContext)_创建Shared Preference工具类_实现自动登录 ===========================获取全局上下文(getA ...