jq ajax成绩单获取显示

最新推荐文章于 2018-09-07 17:59:51 发布

原创最新推荐文章于 2018-09-07 17:59:51 发布 · 635 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

前端笔记同时被 3 个专栏收录

165 篇文章

订阅专栏

jquery

32 篇文章

订阅专栏

ajax

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的分数表格动态加载案例，通过AJAX从JSON文件中获取学生分数数据，并将其填充到HTML表格中。此外，还实现了表格行点击变色的功能，以及奇偶行背景颜色交替的效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分数表</title>
    <script src="jquery1.1.1.min.js"></script>
    <style>
        .red{background:red;}
        .gray1{background:#cccccc;}
        .gray2{background:#666666;}

    </style>
</head>
<body>

<table border="1" id="table">
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>性别</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>总成绩</th>
    </tr>

</table>


<script>
    $(function () {

        $.ajax({
            type: "POST",
            url: "datatable.json",
            dataType: "json",
            success : function(data){
                var html="";
                $.each(data,function (i,trdata) {
                    var  scroll = parseFloat(trdata['语文'])+ parseFloat(trdata['数学'])+parseFloat(trdata['英语']);
                    html+="<tr class='row'>" +
                            "<td>"+trdata['姓名']+"</td>" +
                            "<td>"+trdata['学号']+"</td>" +
                            "<td>"+trdata['性别']+"</td>" +
                            "<td class='sco1'>"+trdata['语文']+"</td>" +
                            "<td class='sco2'>"+trdata['数学']+"</td>" +
                            "<td class='sco3'>"+trdata['英语']+"</td>" +
                            "<td class='scoall'>"+scroll+"</td>" +
                            "</tr>";
                });
                $("#table").append(html);
                $("#table .row:odd").addClass("gray1");
                $("#table .row:even").addClass("gray2");


    //          $("#table").bind("click","table .row",function (ev) {     //该方法有效
    //                $(ev.target).parent().css("background","red");
    //          })
    //          $("#table .row").click(function () {     //该方法有效
    //               $(this).css("background","red");
    //          })

            }

        });

        $("#table").bind("click","table .row",function (ev) {  //该方法有效
            $(ev.target).parent().css("background","red");
        })


//        $("#table .row").click(function () {     //该方法无效
//            $(this).css("background","red");
//        })


    })
</script>

</body>
</html>

datajson：

[
    {
        "姓名": "李四",
        "学号": "1000904101",
        "性别": "男",
        "语文": "85",
        "数学": "80",
        "英语": "60"
    },
    {
        "姓名": "张三",
        "学号": "1000904102",
        "性别": "女",
        "语文": "85",
        "数学": "23",
        "英语": "60"
    },
    {
        "姓名": "张三",
        "学号": "1000904103",
        "性别": "男",
        "语文": "85",
        "数学": "83",
        "英语": "60"
    },
    {
        "姓名": "张三",
        "学号": "1000904104",
        "性别": "男",
        "语文": "85",
        "数学": "86",
        "英语": "60"
    },
    {
        "姓名": "张三",
        "学号": "1000904105",
        "性别": "男",
        "语文": "85",
        "数学": "73",
        "英语": "60"
    },
    {
        "姓名": "张三",
        "学号": "1000904106",
        "性别": "男",
        "语文": "85",
        "数学": "83",
        "英语": "60"
    },
    {
        "姓名": "王小五",
        "学号": "1000904107",
        "性别": "男",
        "语文": "85",
        "数学": "23",
        "英语": "60"
    }
]

效果图显示：
这里写图片描述