使用JQuery动态创建表格

最新推荐文章于 2021-06-09 13:59:46 发布

原创最新推荐文章于 2021-06-09 13:59:46 发布 · 941 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#使用JQuery动态创建表格

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

69 篇文章

订阅专栏

本文介绍了一种使用jQuery和HTML动态创建表格的方法。通过点击按钮，可以生成包含链接的表格，链接指向不同的网站如百度、饿了么和阿里。代码示例展示了如何使用$.map方法遍历对象并创建表格元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" id="btn1" value="create table"/>
    <table>
        
    </table>
    <script type="text/javascript">
        var data = {
            "百度": "http://www.baidu.com",
            "饿了么": "http://www.baidu.com",
            "阿里": "http://www.baidu.com",
        };
        $(function () {
            //注册单击事件
            $("#btn1").click(function () {
                //创建一个table主动添加到body中
                var tblObj = $('<table border="1"></table>').appendTo("body");
                ////用each()方法进行循环遍历数据，创建tr，主动添加到table对象中
                //$.each(data, function (key, val) {
                //    $('<tr><td>' + key + '</td><td><a href="' + val + '" target="_blank">'+key+'</a></td></tr>').appendTo(tblObj);
                //});
                //用map方法进行循环遍历数据，创建tr，主动添加到table对象中
                $.map(data, function (val,key) {
                    $('<tr><td>' + key + '</td><td><a href="' + val + '" target="_blank">' + key + '</a></td></tr>').appendTo(tblObj);
                });
            });
        });
    </script>
</body>
</html>