10JavaScript DOM动态创建表格第二种方法（建议使用的方法） 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript"> 
        var dic = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com.cn/", "谷歌": "http://www.google.com" };

        onload = function () {
            document.getElementById('btn').onclick = function () {
                //创建一个表格
                var tb = document.createElement('table');
                tb.border = '1';
                for (var item in dic) {
                    //根据表格tb来创建行
                    var rowObj = tb.insertRow(-1);
                    //根据行来创建单元格
                    var celObj1 = rowObj.insertCell(-1);
                    if (typeof (celObj1.innerText) == 'string') {//判断浏览器兼容问题
                        //IE浏览器
                        celObj1.innerText = item;
                    } else {
                        //火狐浏览器
                        celObj1.textContent = item;
                    };
                    var celObj2 = rowObj.insertCell(-1);
                    celObj2.innerHTML = '<a href="'+dic[item]+'">'+dic[item]+'</a>';
                };
                document.body.appendChild(tb);
            };
        };
    </script>
</head>
<body>
    <input id="btn" type="button" name="name" value="添加表格" />
</body>
</html>

　　

posted on 2016-01-07 21:51  努力的活着_在人间  阅读(244)  评论(0)    收藏  举报

导航