web前端开发第202页习题3代码
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>