另一种动态创建表格的方法（insertRow(-1)-insertCell()）

最新推荐文章于 2024-02-27 22:01:19 发布

一只极度渴望成长的Giser

最新推荐文章于 2024-02-27 22:01:19 发布

阅读量654

点赞数

分类专栏： Javascript、JQuery练习文章标签：另一种动态创建表格的方法（insertRow(-1)-insertCe

本文链接：https://blog.csdn.net/qq_32077521/article/details/97615689

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <button id="btn">动态创建表格</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn').onclick = function () {
                var jsontxt = { "百度": "http://www.baidu.com", "饿了么": "http://www.ele.me", "谷歌": "http://www.google.com" };
                var table = document.createElement('table');
                table.border = '1px';
                for (var i in jsontxt) {
                    var currentRow = table.insertRow(-1);
                    currentRow.insertCell(-1).innerHTML = i;
                    currentRow.insertCell(-1).innerHTML = '<a href="' + jsontxt[i] + '" target="_blank">' + i + '</a>';
                }
                document.body.appendChild(table);
            };
        };
    </script>
</body>
</html>