排序参考
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <style>
10 table,
11 td {
12 border: 1px solid;
13 padding: 10px;
14 border-collapse: collapse;
15 text-align: center;
16 }
17 </style>
18 </head>
19
20 <body>
21
22 <script>
23 "use strict";
24 let stu = [
25 {
26 stuNo: 1,
27 course1: 77,
28 course2: 66,
29 course3: 88,
30 total: "",
31 },
32 {
33 stuNo: 2,
34 course1: 78,
35 course2: 89,
36 course3: 79,
37 total: "",
38 },
39 {
40 stuNo: 3,
41 course1: 92,
42 course2: 84,
43 course3: 78,
44 total: "",
45 },
46 {
47 stuNo: 4,
48 course1: 78,
49 course2: 99,
50 course3: 83,
51 total: "",
52 },
53 {
54 stuNo: 5,
55 course1: 85,
56 course2: 97,
57 course3: 69,
58 total: "",
59 }
60 ];
61
62
63
64 document.write("<table>");
65 document.write("<tr><td>stuNo</td><td>course1</td><td>course2</td><td>course3</td><td>total</td></tr>");
66 for (let i = 0; i < stu.length; i++) {
67 let total = stu[i].course1 + stu[i].course2 + stu[i].course3;
68 stu[i].total = total
69 document.write(`<tr><td>${stu[i].stuNo}</td><td>${stu[i].course1}</td><td>${stu[i].course2}</td><td>${stu[i].course3}</td><td>${stu[i].total}</td></tr>`);
70 }
71 document.write("</table>");
72
73 document.write("<br>")
74
75 stu.sort(function (stu1, stu2) {
76 return stu2.total - stu1.total;
77 })
78
79 document.write("<table>");
80 document.write("<tr><td>stuNo</td><td>course1</td><td>course2</td><td>course3</td><td>total</td></tr>");
81 for (let i = 0; i < stu.length; i++) {
82 let total = stu[i].course1 + stu[i].course2 + stu[i].course3;
83 stu[i].total = total
84 document.write(`<tr><td>${stu[i].stuNo}</td><td>${stu[i].course1}</td><td>${stu[i].course2}</td><td>${stu[i].course3}</td><td>${stu[i].total}</td></tr>`);
85 }
86 document.write("</table>");
87
88 </script>
89 </body>
90
91 </html>
