动态创建表格之兼容性

最新推荐文章于 2022-02-17 18:06:20 发布

pvfhv

最新推荐文章于 2022-02-17 18:06:20 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/pvfhv/article/details/8437214

版权

javascript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

导语：

表格在页面中虽已不是主流的布局方式，但在实际的开发过程中经常会遇到一些要动态创建表格数据的场景，如何完全兼容现在所有的浏览器是一个问题，目前我的解决方案如下，但检查在IE9下运行不兼容！！！！！！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var json = [{ "name": "博客园", "url": "http://www.cnblogs.com" }, { "name": "搜狐", "url": "http://www.sohu.com" }, { "name": "新浪", "url": "http://www.sina.com.cn"}];

        window.onload = function () {
            /*//第一种方法
            var site = document.getElementById("site");
            var table = document.createElement("table");
            site.appendChild(table);
            var tbody = document.createElement("tbody");
            table.appendChild(tbody);

            for (var i = 0; i < json.length; i++) {
            var address = json[i];
            var tr = document.createElement("tr");
            tbody.appendChild(tr);

            var td1 = document.createElement("td");
            td1.innerHTML = address.name;
            tr.appendChild(td1);

            var td2 = document.createElement("td");
            td2.innerHTML = "<a href='" + address["url"] + "'>" + address.url + "</a>";
            tr.appendChild(td2);
            }
            */

            /*//第二种方法
            var site = document.getElementById("site");
            var table = document.createElement("table");
            site.appendChild(table);

            for (var i = 0; i < json.length; i++) {
            var address = json[i];
            var tr = table.insertRow(-1);

            var td = tr.insertCell(-1);
            td.innerHTML = address.name;

            td = tr.insertCell(-1);
            td.innerHTML = "<a href='" + address["url"] + "'>" + address.url + "</a>";
            }            
            */

            //绝招，粗放型创建表格
            var site = document.getElementById("site");
            var table = "<table><tbody>";
            for (var i = 0; i < json.length; i++) {
                var address = json[i];
                table += "<tr><td>" + address.name + "</td><td><a href='" + address["url"] + "'>" + address.url + "</a></td></tr>";
            }
            table += "</tbody></table>";
            site.innerHTML = table;
        }
    </script>
</head>
<body>
    <div id="site">
    </div>
</body>
</html>

pvfhv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建表格之兼容性

导语：表格在页面中虽已不是主流的布局方式，但在实际的开发过程中经常会遇到一些要动态创建表格数据的场景，如何完全兼容现在所有的浏览器是一个问题，目前我的解决方案如下，但检查在IE9下运行不兼容！！！！！！！！ var json = [{ "name": "博客园", "url": "http://www.cnblogs.com" }, { "nam
复制链接

扫一扫

专栏目录