JQuery根据Json创建表格

浏览数：27 / 时间：2015年06月09日

 $(function () {
            var getjson = {
                "百度": "http://www.baidu.com",
                "新浪": "http://www.sina.com.cn",
                "腾讯": "http://www.qq.com"
            };
            $(‘#btn‘).click(function () {
                var tbobj = $(‘<table border="1"></table>‘).appendTo($(‘body‘));//appendTo表示添加到 body

                $.map(getjson, function (v, k) {
                    //给tbobject添加键 和值
                    tbobj.append(‘<tr><td>‘ + k + ‘</td><td><a href="‘ + v + ‘">‘ + v + ‘</a></td></tr>‘)
                });

            });
        });

完整代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>利用jQuery动态创建DOM</title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var getjson = {
                "百度": "http://www.baidu.com",
                "新浪": "http://www.sina.com.cn",
                "腾讯": "http://www.qq.com"
            };
            $(‘#btn‘).click(function () {
                var tbobj = $(‘<table border="1"></table>‘).appendTo($(‘body‘));//appendTo表示添加到 body

                $.map(getjson, function (v, k) {
                    //给tbobject添加键 和值
                    tbobj.append(‘<tr><td>‘ + k + ‘</td><td><a href="‘ + v + ‘">‘ + v + ‘</a></td></tr>‘)
                });

            });
        });
    </script>
    <style type="text/css">
        #ts {
            border: 1px solid red;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="button" id="btn" value="创建一个表格" />
</body>
</html>