javascript 动态创建table数据(处理了ie6,7兼容问题)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加网格数据(处理了IE兼容问题)</title>
    <script type="text/javascript">
        function AppendData() {
            var data = {"中国新鸽网":"http://www.chinaxinge.com",
                        "百度":"http://www.baidu.com",
                        "搜狐": "http://www.sohu.com"};
            var table = document.getElementById("tblMain");
            for (var key in data) {               
                var value = data[key];
                var tr = table.insertRow(-1); //FireFox必须使用-1这个参数

                var td1 = tr.insertCell(-1);
                td1.innerText = key;

                var td2 = tr.insertCell(-1);
                td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
            }
        }
    </script>
</head>
<body>
    <table border="1" id="tblMain"></table>
    <input type="button" value="添加网格数据(处理了IE兼容问题)" onclick="AppendData()" />
</body>
</html>

 

---------------------------------------------------------------------------------------------------------------------------------------

方法2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态创建表格(处理IE6兼容问题)</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;
                tr.appendChild(td1);

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

                //table.appendChild(tr);  把这一句替换掉
                table.tBodies[0].appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <!--由于动态添加的数据在debugbar中看生成的HTML代码发现,会自动添加一个<tbody>
        并且内容是空的,把我们动态生成的数据给冲掉了,所以我们手工添加一个<tbody>
        tr添加到这个<tbody>下面
    -->
    <table id="tblMain"><tbody></tbody></table>
    <input type="button" value="动态添加网格数据" onclick="AppendTableData()" />
</body>
</html>

 

你可能感兴趣的:(javascript 动态创建table数据(处理了ie6,7兼容问题))