<script type="text/javascript">

        var dict = {

            '百度': 'http://wwww.baidu.com',

            '新浪': 'http://www.sina.com',

            '谷歌':'http://www.google.com'

        }

        window.onload = function () {

            //注册点击事件

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

                //动态创建表格

                var tablewebsiteList = document.createElement('table');

                tablewebsiteList.border = '1';

                //遍历数据

                for (var key in dict) {

                    //创建行对象

                    var trObject = document.createElement('tr');

                    //创建列对象

                    var td1 = document.createElement('td');

                    td1.innerHTML = key;

                    var td2 = document.createElement('td');

                    //根据key找到链接

                    td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>'

                    //把列加到行中

                    trObject.appendChild(td1);

                    trObject.appendChild(td2);

                    //把行加到表格中

                    tablewebsiteList.appendChild(trObject);

                }

                //把表格加到body中

                document.body.appendChild(tablewebsiteList);

            };

        };

    </script>

</head>

<body>

    <input type="button" name="name" value="动态生成表格对象"id="btn1" />

</body>

javascript动态添加表格以及获取数据的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  3. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. JQuery动态添加表格，然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  6. WPF GridView动态添加项并读取数据

    假设数据库有如下表, 首先我们创建一个WPF工程,界面如下 <Window x:Class="WpfApplication2.MainWindow" xmlns=" ...

  7. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  8. layui 动态添加 表格数据

    静态表格: <table class="layui-table" id="table" lay-filter="table"> ...

  9. javascript动态添加本地文件列表信息

    工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...

随机推荐

  1. 2018数学建模国赛总结（A题/编程选手视角）

    2018数学建模已经告一段落了,先说说基本情况吧,我们队伍专业分别为:金融(A),会计(B),计算机(我),配置还算可以,他们俩会数据分析软件也会写论文,我可以写代码,画图.他们俩打过美赛(M奖),我 ...

  2. A - 活动安排问题（贪心）

    A - 活动安排问题 有若干个活动,第i个开始时间和结束时间是[Si,fi),同一个教室安排的活动之间不能交叠,求要安排所有活动,最少需要几个教室?  Input第一行一个正整数n (n <= ...

  3. ajax-2

    serialize()输出序列化表单值的结果: 如: <html> <head> <script type="text/javascript" src ...

  4. 【转】检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 80070005 拒绝访问

    源地址:https://www.cnblogs.com/love522/p/4462253.html 最近在做一个网站时,有一个下载word文档功能,在本地直接调试是可以下载的,但部署到IIS上就出现 ...

  5. 简单的opengl步骤模板

    以下内容整理自:https://learnopengl-cn.github.io/01%20Getting%20started/03%20Hello%20Window/ 一.初始化 glfw 并设置相 ...

  6. [AGC005C]Tree Restoring 构造

    Description ​ 给出一个数组a,要求构造一颗树,使节点x距离最远的点的距离为\(a_x\). Input ​ 第一行一个正整数NN(2≤N≤1002≤N≤100) ​ 接下来一行,有NN个 ...

  7. 老男孩Day11作业：selectors版socket

    一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 二.readme 一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP ...

  8. vue模拟后台数据，请求本地数据的配置（旧版本dev-server.js，新版本webpack.dev.conf.js）

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  9. select和epoll的实现

    select:fd_set是输入结果参数,每次select之后,还得重置fd_set (1)使用copy_from_user从用户空间拷贝fd_set到内核空间,第一步需要复制所有感兴趣的文件描述符到 ...

  10. [转] Java运行时动态生成class的方法

    [From] http://www.liaoxuefeng.com/article/0014617596492474eea2227bf04477e83e6d094683e0536000 廖雪峰 / 编 ...