用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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML中的单选按钮实现男女性别选择

 HTML中的单选按钮实现男女性别选择,不让男女同是都能都能选择,实现方法:在按钮的属性里写一个name属性,并且把name的值设置成相同的例:男女...

javascript表格动态添加行,添加列,js,table,tr,td

New Document // Example: obj = findObj("image1");function findObj(theObj, theDoc){var p, i, foundOb...

js动态添加表格的行与列

//动态添加行与列 function addHtml( )         {     var tab=document.getElementById("viewTabs"); //获得表格 ...

Button按钮多行显示的实现方法

 Button按钮多行显示的实现方法一、VB中Button按钮多行显示的实现方法     先在记事本等文本文件中写上两行或多行文字,然后复制到Button按钮的Caption属性中即可。二、C#中Bu...

后台动态生成table表格

以前看到动态生成table的代码时,认为特别复杂,看到代码就不想看,认为这个用不到,而且还抱着一种难的心理. 不管则着,还是逃不过,躲避不是好的方法,这次就用到了动态生成表的要求,不学不行呀,不然页面...

JQuery动态定义表格列项

在页面展示表格的时候,经常一张表格会有十几项数据甚至几十项数据。对于不同的用户,对于表单显示的列会有不同的需求,有的用户仅仅需要查看几项数据,而有的用户却需要显示大部分的数据项只隐藏小部分的数据项。 ...

js算法--输入行列,生成一个表格(table)

html: 请输入行数: 请输入列数: 创建 javaScript: functino autocreate() { var line = document.ge...

点击按钮,生成表单

js:  function addrow() {    var table = document.getElementById("test_table");    if (!table) return...

点击按钮动态创建控件并获得值的原理及方法

说到动态创建控件 就必须说下页面的生命周期了  上个简单的图 说下可能遇到的问题  控件创建好了  但再点别的按钮时  就又消失了  因为没有保存状态 还有的在Init查看Viewstate等 这些都...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格
举报原因:
原因补充:

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