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

(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>
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页
实付 99.00元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值