<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. Timer（定时器）

    默认情况下,在每个采样器之前没有任何延时,这样不能很好的模拟现实生活中人们访问网页,因为现实生活中人们点击一个请求后,会有一定的时间,然后再点击下一个请求,JMeter提供了定时器来模拟这种行为. 定 ...

  2. ### 20165219 2017-2018-2《Java程序设计》结对编程一 第二周总结

    20165219 2017-2018-2<Java程序设计>结对编程一 第二周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...

  3. kali linux之手动漏洞挖掘二

    漏洞挖掘原则/宗旨----所有变量,所有头(cookie中的变量),逐个变量删除 身份认证 常用若口令/基于字典的密码爆破/锁定帐号 信息收集(手机号,身份证,住址信息等等) 密码嗅探 会话sessi ...

  4. 在CentOS-6.3环境下，利用grub工具手工制作Linux U盘安装盘

    注:此文是本人亲自操作实现后写的心得,同时也是对自己操作的记录. 制作的全过程概况 准备工作: U盘重新分区: 格式化U盘: 安装grub文件到U盘特定的分区: 拷贝镜像中的相关文件到U盘: 安装时设 ...

  5. crm录入成绩modelformset组件

    不基于formset组件的普通写法>> views: class RecordScoreView(View): # 录入成绩 def get(self, request,class_stu ...

  6. 12、OpenCV Python 图像梯度

    __author__ = "WSX" import cv2 as cv import numpy as np def lapalian_demo(image): #拉普拉斯算子 # ...

  7. 数据结构实验之图论七：驴友计划 （ 最短路径 Dijkstra 算法 ）

    数据结构实验之图论七:驴友计划 Time Limit: 1000 ms           Memory Limit: 65536 KiB Submit Statistic Discuss Probl ...

  8. 航天独角兽Spacex

    2018年2月7日下午3时45分,猎鹰重型火箭在位于卡纳维拉尔角的肯尼迪航天中心LC-39A平台顺利升空.火箭直升云霄,按照既定轨道持续升空,位于美国弗罗里达州卡纳维拉尔角的航天发射中心硝烟四起,非常 ...

  9. Python博文列表

    手把手|100行Python代码自动抢火车票!(包教包会):https://zhuanlan.zhihu.com/p/32928355 最全中华古诗词数据库, :https://github.com/ ...

  10. stiff chemistry模型出现NaN错误

    通过定位可以看到,是usr_rates.f中出现了奇异值,因为我的代码中有这样一句话: 而同时我的ConH2在声明后没有赋初值,因此,当X_g(IJK,H2) < c_Limiter后,ConH ...