66作业

"""
2、现有以下成绩单数据
scores = [
    { name: 'Bob', math: 97, chinese: 89, english: 67 },
    { name: 'Tom', math: 67, chinese: 52, english: 98 },
    { name: 'Jerry', math: 72, chinese: 87, english: 89 },
    { name: 'Ben', math: 92, chinese: 87, english: 59 },
    { name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
""""
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover table-bordered table-striped" id="table">
                    <thead>
                        <tr>
                            <!-- <th>序号</th> -->
                            <th>排名</th>
                            <th>姓名</th>
                            <th>语文</th>
                            <th>数学</th>
                            <th>英语</th>
                            <th>总分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(stu,i) in scores'>
                            <!-- 怎么取到值去相加求和 -->
                            <!-- <td>{{ i }}</td> -->
                            <td>{{ i+1 }}</td>
                            <td v-for='v in stu'>{{ v }}</td>

                        </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let scores = [{
            name: 'Bob',
            math: 97,
            chinese: 89,
            english: 67
        },
        {
            name: 'Tom',
            math: 67,
            chinese: 52,
            english: 98
        },
        {
            name: 'Jerry',
            math: 72,
            chinese: 87,
            english: 89
        },
        {
            name: 'Ben',
            math: 92,
            chinese: 87,
            english: 59
        },
        {
            name: 'Chan',
            math: 47,
            chinese: 85,
            english: 92
        },

    ];

    let total_scores = [];
    for (stu of scores) {
        stu.sum = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }
   


    for(let i = 0; i < total_scores.length - 1; i++) {
        for(let j = 0;  j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].sum < total_scores[j+1].sum) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j+1];
                total_scores[j+1] = t;
            }
        }
    }
    console.log(total_scores)

    new Vue({
                el: '#table',
                data: {
                    scores: total_scores,
                }
               
    })
</script>

</html>
"""
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover table-bordered table-striped" id="table">
                    <thead>
                        <tr>
                            <!-- <th>序号</th> -->
                            <th>排名</th>
                            <th>姓名</th>
                            <th>语文</th>
                            <th>数学</th>
                            <th>英语</th>
                            <th>总分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='(stu,i) in scores' v-if="stu.math>60&&stu.chinese>60&&stu.english>60">
                            <td>{{ i+1 }}</td>
                     
                            <td v-for='v in stu'>{{ v }}</td>

                        </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let scores = [{
            name: 'Bob',
            math: 97,
            chinese: 89,
            english: 67
        },
        {
            name: 'Tom',
            math: 67,
            chinese: 52,
            english: 98
        },
        {
            name: 'Jerry',
            math: 72,
            chinese: 87,
            english: 89
        },
        {
            name: 'Ben',
            math: 92,
            chinese: 87,
            english: 59
        },
        {
            name: 'Chan',
            math: 47,
            chinese: 85,
            english: 92
        },

    ];

    let total_scores = [];
    for (stu of scores) {
        stu.sum = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }
   


    for(let i = 0; i < total_scores.length - 1; i++) {
        for(let j = 0;  j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].sum < total_scores[j+1].sum) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j+1];
                total_scores[j+1] = t;
            }
        }
    }
    console.log(total_scores)

    new Vue({
                el: '#table',
                data: {
                    scores: total_scores,
                }
    });
</script>

</html>
猜你喜欢
