javascript 动态创建表格（代码不兼容IE6）

最新推荐文章于 2025-09-30 09:22:21 发布

原创最新推荐文章于 2025-09-30 09:22:21 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建HTML表格的方法，并提供了具体实现代码。该方法通过读取数据对象来填充表格内容，包括网站名称及其链接。

动态创建表格（代码不兼容IE6）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态创建表格</title>
    <script type="text/javascript">
        function AppendTableData() {
            var table = document.getElementById("tblMain");
            var data = { "百度": "http://www.baidu.com",
                "中国信鸽网": "http://www.chinaxinge.com",
                "搜狐": "http://www.sohu.com"
            };
            for (var key in data) {
                var tr = document.createElement("tr");

                var td1 = document.createElement("td");
                td1.innerText = key;                      //FireFox不支持innerText,只能使用innerHTML
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";
                tr.appendChild(td2);

                table.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="tblMain"></table>
    <input type="button" value="动态添加网格数据" onclick="AppendTableData()" />
</body>
</html>