如何在用HTML编写的表单上设置排名系统，以使用javascript对计算总值进行排名

Question

我有一个简单的HTML格式。共有3个部分（A，B和C部分）。当用户填写表格时，通过显示总点数和百分比来计算每个部分。我想对分数进行排名并将其显示在排名列中，但似乎无法弄清楚该如何做。例如，如果A区有4分，B区有3分，C区有0分，则A区的等级为1，B区的等级为2，C区的等级为3。在填写表格时，排名变化是理想的。

我不熟悉JavaScript，这是我当前正在上课的作业。我在如何逻辑上实现这一点上遇到了麻烦。这只是我表格的一个示例。我确实有一个更大的表格，其中包含更多的部分和问题。请运行我的代码，以便您可以看到更好的视觉效果。任何对我有帮助的代码片段和建议将不胜感激。我知道我的代码不是最好的，但是就像我说的那样，我还在学习，我的教授也希望我们练习我的代码结构方式，因此更改此代码可能会导致每位教授减少点数。因此，请提供任何代码段，请保持我的代码结构相同。

我曾尝试在JavaScript中使用if语句，但就像我说过的那样，我不能全神贯注于如何逻辑地做到这一点。我很感激。

    <table>
          <tr>
            <th>Category |</th>
            <th>Points Possible |</th>
            <th>Points Awarded |</th>
            <th>Percent Achieved |</th>
            <th>Ranking</th>
          </tr>
          <tr>
            <td align="center">A</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalASummary"></span></div></b></td>
            <td align="center"><b><div><span id="TotalAPercent"></span></div></b></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
          <tr>
            <td align="center">B</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalBSummary"></span></div></td>
            <td align="center"><b><div><span id="TotalBPercent"></span></div></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
          <tr>
            <td align="center">C</td>
            <td align="center">4</td>
            <td align="center"><b><div><span id="TotalCSummary"></span></div></td>
            <td align="center"><b><div><span id="TotalCPercent"></span></div></td>
            <td bgcolor="#92d050" align="center"></td>
          </tr>
       </table>
       <table>
         <tr>
           <th>Section A.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>A.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Aa1">
                             <option value="0">0</option>
                             <option value="1">1</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Ab1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcA1();" id="Ac1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>
         <tr>
           <td class="subtotal">Section A. Total</td>
           <td align="center"><b>4</b></td>
           <td align="center"><b><div><span id="totalA"></span></div></b></td>
         </tr>

         <tr>
           <th>Section B.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>B.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Ba1">
                             <option value="0">0</option>
                             <option value="2">2</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Bb1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcB1();" id="Bc1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>

         <tr>
           <td class="subtotal">Section B. Total</td>
           <td align="center"><b>5</b></td>
           <td align="center"><b><div><span id="totalB"></span></div></b></td>
         </tr>
         <tr>
           <th>Section C.</th>
           <td></td>
           <td></td>
         </tr>
         <tr>
           <td></td>
         </tr>
         <tr>
           <td><b>C.1</b></td>
           <td><b>Value</b></td>
           <td><b>Awarded</b></td>
         </tr>
         <tr>
           <td>a)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Ca1">
                             <option value="0">0</option>
                             <option value="3">3</option>
                           </select></td>
         </tr>
         <tr>
           <td>b)</td>
           <td align="center">1</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Cb1">
                              <option value="0">0</option>
                              <option value="1">1</option>
                              </select></td>
         </tr>
         <tr>
           <td>c)</td>
           <td align="center">2</td>
           <td align="center"><select class="select" onChange="calcC1();" id="Cc1">
                              <option value="0">0</option>
                              <option value="2">2</option>
                              </select></td>
         </tr>
         <tr>
           <td class="subtotal">Section C. Total</td>
           <td align="center"><b>6</b></td>
           <td align="center"><b><div><span id="totalC"></span></div></b></td>
         </tr>
       </table>

       <script>
       function calcA1R() {
         var Aa1 = document.getElementById('Aa1');
         var Ab1 = document.getElementById('Ab1');
         var Ac1 = document.getElementById('Ac1');

         var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
         var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
         var Ac1Val = Ac1.options[Ac1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
       }

       function calcA1() {
         displaySumA()
       }

       function displaySumA() {
         document.getElementById('totalA').textContent = calcSumA()
         document.getElementById('TotalASummary').textContent = calcSumA()
         document.getElementById('TotalAPercent').textContent = Math.ceil(calcSumA() / 4 * 100) +'%'
       }

       function calcSumA() {
         return calcA1R()
       }

       function calcB1R() {
         var Ba1 = document.getElementById('Ba1');
         var Bb1 = document.getElementById('Bb1');
         var Bc1 = document.getElementById('Bc1');

         var Ba1Val = Ba1.options[Ba1.selectedIndex].value;
         var Bb1Val = Bb1.options[Bb1.selectedIndex].value;
         var Bc1Val = Bc1.options[Bc1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Ba1Val), parseInt(Bb1Val), parseInt(Bc1Val)].reduce((a, c) => a + c, 0)
       }

       function calcB1() {
         displaySumB()
       }

       function displaySumB() {
         document.getElementById('totalB').textContent = calcSumB()
         document.getElementById('TotalBSummary').textContent = calcSumB()
         document.getElementById('TotalBPercent').textContent = Math.ceil(calcSumB() / 5 * 100) +'%'
       }

       function calcSumB() {
         return calcB1R()
       }

       function calcC1R() {
         var Ba1 = document.getElementById('Ca1');
         var Bb1 = document.getElementById('Cb1');
         var Bc1 = document.getElementById('Cc1');

         var Ca1Val = Ca1.options[Ca1.selectedIndex].value;
         var Cb1Val = Cb1.options[Cb1.selectedIndex].value;
         var Cc1Val = Cc1.options[Cc1.selectedIndex].value;

         // returning the sum of the values
         return [parseInt(Ca1Val), parseInt(Cb1Val), parseInt(Cc1Val)].reduce((a, c) => a + c, 0)
       }

       function calcC1() {
         displaySumC()
       }

       function displaySumC() {
         document.getElementById('totalC').textContent = calcSumC()
         document.getElementById('TotalCSummary').textContent = calcSumC()
         document.getElementById('TotalCPercent').textContent = Math.ceil(calcSumC() / 6 * 100) +'%'
       }

       function calcSumC() {
         return calcC1R()
       }

       </script>

Answer 1

很酷，您做得非常好。您只需要排序

var list = {"A": 100, "B": 75, "C": 116, "D": 15};
keysSorted = Object.keys(list).sort(function(a,b){return list[a]-list[b]})
console.log(keysSorted);

尝试使用上述逻辑并在您的代码中实现。谢谢