3.การหาผลรวมคะแนนและการคิดเกรด

หรือ วีดีโอ flash

ตัวอย่างโจทย์

1. <style>
2. table, td {
3. border : 1px solid blue;
4. border-collapse : collapse;
5. text-align : center;
6. }
7. tr:first-child,
8. table:last-child tr:nth-last-child(2) {
9. background : yellow;
10. }
11. input {
12. border : none;
13. text-align : center;
14. }
15. </style>
16. <table>
17. <tr>
18. <td>ชื่อ</td>
19. <td>คะแนนรวม</td>
20. <td>คะแนนสอบ 1</td>
21. <td>รหัส</td>
22. <td>เกรด</td>
23. <td>คะแนนสอบ 2</td>
24. <td>คะแนนสอบ 3</td>
25. </tr>
26. <tr>
27. <td>สมหญิง</td>
28. <td>(ข้อ1)</td>
29. <td><input type='number'></td>
30. <td>s002</td>
31. <td>(ข้อ2)</td>
32. <td><input type='number'></td>
33. <td><input type='number'></td>
34. </tr>
35. <tr>
36. <td>มานี</td>
37. <td>(ข้อ1)</td>
38. <td><input type='number'></td>
39. <td>s006</td>
40. <td>(ข้อ2)</td>
41. <td><input type='number'></td>
42. <td><input type='number'></td>
43. </tr>
44. <tr>
45. <td>ราตรี</td>
46. <td>(ข้อ1)</td>
47. <td><input type='number'></td>
48. <td>s004</td>
49. <td>(ข้อ2)</td>
50. <td><input type='number'></td>
51. <td><input type='number'></td>
52. </tr>
53. <tr>
54. <td>สมชาย</td>
55. <td>(ข้อ1)</td>
56. <td><input type='number'></td>
57. <td>s001</td>
58. <td>(ข้อ2)</td>
59. <td><input type='number'></td>
60. <td><input type='number'></td>
61. </tr>
62. </table> <br>
63. <table>
64. <tr>
65. <td>คะแนนระหว่าง</td>
66. <td>เกรด</td>
67. <td>จำนวน</td>
68. <td>คิดเปอร์เซนต์</td>
69. </tr>
70. <tr>
71. <td>93-100</td>
72. <td>A+</td>
73. <td>(ข้อ 3)</td>
74. <td>(ข้อ 5)</td>
75. </tr>
76. <tr>
77. <td>83-92</td>
78. <td>C+</td>
79. <td>(ข้อ 3)</td>
80. <td>(ข้อ 5)</td>
81. </tr>
82. <tr>
83. <td>78-82</td>
84. <td>A-</td>
85. <td>(ข้อ 3)</td>
86. <td>(ข้อ 5)</td>
87. </tr>
88. <tr>
89. <td>72-77</td>
90. <td>B+</td>
91. <td>(ข้อ 3)</td>
92. <td>(ข้อ 5)</td>
93. </tr>
94. <tr>
95. <td>0-71</td>
96. <td>F</td>
97. <td>(ข้อ 3)</td>
98. <td>(ข้อ 5)</td>
99. </tr>
100. <tr>
101. <td></td>
102. <td>รวม</td>
103. <td>(ข้อ 4)</td>
104. <td>(ข้อ 6)</td>
105. </tr>
106. <tr>
107. <td>ไม่อยู่ในช่วงข้างต้น</td>
108. <td>A</td>
109. <td>(ข้อ 3)</td>
110. <td></td>
111. </tr>
112. </table>
113. <script>
114. function sum(obj) {
115. var pack = obj.parentNode.parentNode;
116. var s = pack.getElementsByTagName('input');
117. // หาผลรวม
118. var a = Number(s[0].value) + Number(s[1].value);
120. // แสดงผลรวม
121. var td = pack.getElementsByTagName('td');
122. td[4].innerHTML = a;
124. // คิดเกรด
125. var g = "?";
126. // แสดงเกรด
127. td[5].innerHTML = g;
128. }
129. </script>

ตัวอย่างโจทย์ 2