码迷,mamicode.com
首页 > Web开发 > 详细

JQuery根据Json创建表格

时间:2014-08-16 18:29:10      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   ar   2014   

 $(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>‘)
                });

            });
        });

bubuko.com,布布扣

完整代码

<!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>

 

JQuery根据Json创建表格,布布扣,bubuko.com

JQuery根据Json创建表格

标签:style   blog   http   color   java   io   ar   2014   

原文地址:http://www.cnblogs.com/caihuashun/p/3916663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!