用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格

原创 2016年08月29日 11:34:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js练习五</title>
<script type="text/javascript">
        var dict = {
        '百度':'http://www.baidu.com',
        '新浪':'http://www.sina.com.cn',
        '谷歌':'http://www.g.cn'
    };
    window.onload = function () {
        document.getElementById('btn').onclick = function () {
            //动态创建表格
            var tableWebsiteList = document.createElement('table');
            tableWebsiteList.border = "1";
            //1.1遍历数据动态建行
            for (var key in dict) {
                var trObject = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.innerHTML = key;
                var td2 = document.createElement('td');
                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="button" value="OK" id="btn">
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用JavaScript实现动态创建含合并单元格(行)的表单

在HTML DOM中,Table中的行数据是可以通过JavaScript的函数方法insertRow(index)动态增加的,通过insertCell(index)增加单元格。 其中,比较麻烦的是合并...
  • xiaoyw
  • xiaoyw
  • 2016年04月29日 10:23
  • 5152

用 createElement 创建的表格为什么显示不出来?

用 createElement 创建的表格在 FF 下可以显示,但在 IE 下无法显示,原因是没有创建 tbody,应该在 tr 和 table 之间创建 tbody(对应于表头和表脚分别是:thea...
  • fjnu2008
  • fjnu2008
  • 2011年06月28日 11:01
  • 330

React.createElement使用

React.createElement一看这个就能和document.createElement方法类似,创建元素 document.createElement是创建一个指定的元素节点,其参数只有一...
  • skyjohson
  • skyjohson
  • 2016年10月10日 16:37
  • 4549

用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格

动态进行创建列表,点击按钮时,动态创建一个两行三列的表格
  • Sunqlive
  • Sunqlive
  • 2016年08月29日 11:34
  • 2589

2.js按钮特效大全

第二章按钮特效17个 //2.1页面刷新按钮 //重点:刷新页面的方法 reload 如果要使用meta元素 使用r...
  • myvanguard
  • myvanguard
  • 2016年12月09日 14:33
  • 892

[Javascript]在HTML页面中动态添加表格,动态生成行的示例

"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里...
  • softwave
  • softwave
  • 2005年11月18日 08:47
  • 12319

使用Qt生成动态按钮(QPushButton),同时可以使用按钮进行交互

在使用Qt编写软件窗口时,有时会遇到一种需求: 就是当发出一个动作的时候,会弹出若干个按钮,而且要使用这些按钮进行下一步的操控。 而动态生成按钮并不难,只要new Pushbutton就可以了, ...
  • skkw111
  • skkw111
  • 2017年06月04日 15:08
  • 729

点击表格中的某个列,弹出一个div层

通常有一种业务场景,数据库中某个字段的长度非常长,为了美观,不可以将该字段的所有内容展现在页面上。这个时候,一般会通过弹出层来解决这个问题。在这里必要提一下,这个长字段的内容是在展现列表数据的时候,使...
  • linsongbin1
  • linsongbin1
  • 2015年09月22日 09:53
  • 3441

js隐藏table 列

var tab = document.getElementById("datatable"); function changeTable(tab){       var trs = tab.row...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2016年06月30日 14:08
  • 2238

mfc中动态创建按钮

第一步: 在Resource.h中,添加按钮ID:ID_BTN_TEMP = 1001 第二步: 在View类【CView的子类】中添加一个变量,判断按钮是否已经创建: bool m_bIsC...
  • u011672712
  • u011672712
  • 2016年06月09日 01:13
  • 1272
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格
举报原因:
原因补充:

(最多只允许输入30个字)