[JQ权威指南]JQ遍历JSON数据

最新推荐文章于 2023-07-13 10:21:13 发布

厦门德仔

最新推荐文章于 2023-07-13 10:21:13 发布

阅读量1.9k

点赞数

分类专栏： # JQuery 文章标签： json 遍历

本文链接：https://blog.csdn.net/david_520042/article/details/52021940

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

(1)功能描述，导航页面显示全部优秀学生所在年级，点击年级显示学生信息。

<!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" 
            src="Jscript/jquery-1.4.2.min.js">
    </script>

    <style type="text/css">
           body{font-size:13px}
           .iframe{width:320px;border:solid 1px #666}
           .iframe .title{padding:5px;background-color:#eee;}
           .iframe .content{padding:8px; font-size:12px;}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        var objData = {
            member: [{
                grade: "一年级",
                students: {
                    name: ["刘小芳", "李大明"]
                }
            }, {
                grade: "二年级",
                students: {
                    name: ["陈优", "王小海", "朱红"]
                }
            }, {
                grade: "三年级",
                students: {
                    name: ["张妍", "蔡霞"]
                }
            }]
        };

        function add_Grade(){
            var objmember=objData.member;
            var strHTML_0="";
            $.each(objmember,function(index){
                strHTML_0 +='<a href="javascript:" onclick="lnk_Click('+index+')">'
                + objmember[index].grade+'</a>&nbsp;&nbsp;';

            });

            $(".title").html("年级优秀学生："+strHTML_0);
        };

        function lnk_Click(i){
            var objstudent= objData.member[i].students.name;
            var strHTML_1="";

            $.each(objstudent,function(index){
                strHTML_1 +='&nbsp;'+objstudent[index]+'&nbsp;';

            });
            $("#Tip").html(strHTML_1);

        };
        $(function(){
            add_Grade();
            lnk_Click(0);
        })

    </script>
</head>
<body>
    <div class="iframe">
        <div class="title"></div>
        <div class="content">
            <div id="Tip"></div>
        </div>
    </div>
</body>
</html>