<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. newman的常用命令使用总结

    前提:为了运行newman,你要确保系统中安装的Node.js版本是大于v6的. 命令常用选项: newman [optiions] -h:显示命令行帮助,包括选项列表和简单的使用案例. -v:显示当 ...

  2. 拆半搜索binary_search

    //binary_search用于在有序的区间用拆半查找搜索等于某值得元素 #include<algorithm> #include<iostream> using names ...

  3. spring boot日志及Log4j日志配置

    1.默认实现的日志配置 Spring boot默认已经集成了logging,同时也是默认开启的,如果想根据自己的需求对日志进行配置,方法很简单--只需要在配置文件中进行相应设置,这里提供我自己的配置如 ...

  4. kali linux之BurpSuite

    web安全工具中的瑞士军刀,统一的集成工具发现web安全漏洞 所有的工具共享一个能处理并显示http消息的可扩展框架, 模块之间无缝交换信息. 有free版和professional版,java开发, ...

  5. django 部署到Ubuntu安装MYSQL56

    阿里云 Ubuntu 14.04 安装mysql 5.6 1.升级apt-get sudo apt-get update 2. 安装mysql5.6版本 apt-get install mysql-s ...

  6. 12、OpenCV Python 图像梯度

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

  7. c++11中关于`std::thread`线程传参的思考

    关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...

  8. VS2010 由于缺少调试目标"xx.exe"

    有两种可能会造成这种现像.A.配制属性出了问题. 一种方法:右击“解决方案”->“属性”,在弹出的“属性页”框中,选择左边的“配置属性”,在右边,将应用程序的生成那个框框勾上,二可能是这里的属性 ...

  9. JavaScript 调用 Windows 的打印 代码

    JavaScript 调用 Windows 的打印 代码 2009-02-24 10:36 <%@ Page Language="C#" AutoEventWireup=&q ...

  10. bzoj3224 普通平衡树 splay模板

    题目传送门 题目大意:完成一颗splay树. 思路:模板题,学着还是很有意思的. 学习splay树:蒟蒻yyb 该题模板:汪立超 #include<bits/stdc++.h> #defi ...