javascript - 如何使用 Javascript 对 HTML 表单中的结果进行排名？

标签 javascript html forms

我有一个简单的 HTML 表单。有 3 个部分(部分 A、B 和 C)。当用户填写表格时，每个部分都是通过显示总分和百分比来计算的。我想对分数进行排名并将其显示在排名列中，但似乎不知道该怎么做。例如，如果 A 部分有 4 分，B 部分有 3 分，C 部分有 0 分，则 A 部分的排名为 1，B 部分的排名为 2，C 部分的排名为 3。还有填写表格时的排名变化将是理想的。

我是 JavaScript 新手，在如何从逻辑上实现它时遇到了麻烦。这只是我的表格的一个样本。我真的有一个更大的表格，里面有更多的部分和问题。请运行我的代码，以便您可以看到更好的视觉效果。任何对我有帮助的代码片段和建议将不胜感激。

我曾尝试在 JavaScript 中使用 if 语句，但就像我说的那样，我无法思考如何在逻辑上做到这一点。

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() / 4 * 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() / 4 * 100) +'%'
}

function calcSumC() {
  return calcC1R()
}
<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>2</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="1">1</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>2</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="1">1</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>2</b></td>
    <td align="center"><b><div><span id="totalC"></span></div></b></td>
  </tr>
</table>

最佳答案

在这里，我们花了一秒钟来清理您的一些代码。我添加了排名功能，这可能不是最好的方法，但它确实有效。我还删除了重复的代码并将其设置为一个处理每个部分的所有评分的函数。

var sections = {
  section_a: 0,
  section_b: 0,
  section_c: 0
}

function calcSection(section) {
  let sum = 0;
  document.querySelectorAll('select.'+section)
  .forEach((input)=>{
    sum += parseInt(input.options[input.selectedIndex].value);
  });
  sections[section] = sum;
  document.getElementById('total_'+section).textContent = sum;
  document.getElementById('summary_'+section).textContent = sum
  document.getElementById('percent_'+section).textContent = Math.ceil(sum / 4 * 100) +'%';
  calcRanks();
}

function calcRanks() {
  let sectionsArr = [];
  let keys = Object.keys(sections);
  keys.forEach((key, i)=>{
    sectionsArr.push({ section: key, value: sections[key], rank: 0 });
    if(i + 1 === keys.length) {
      sectionsArr.sort((a,b)=>{return a.value > b.value ? -1 : a.value < b.value ? 1 : 0});
      let lastIndex = 0;
      for(let i = 1; i < sectionsArr.length; i++){
        let section = sectionsArr[i];
        let lastSection = sectionsArr[lastIndex];
        //console.log(lastSection.value, section.value);
        if(lastSection.value > section.value) {
          sectionsArr[i].rank = lastSection.rank + 1;
        }
        if(lastSection.value === section.value) {
          sectionsArr[i].rank = lastSection.rank;
        }
        lastIndex = i;
      }
      displayRanks(sectionsArr);
    }
  });
}

function displayRanks(sections) {
  sections.forEach((section)=>{
    document.getElementById('rank_'+section.section).textContent = section.rank +1;
  });
}
<table>
   <tr>
     <th>Category |</th>
     <th>Points Possible |</th>
     <th>Points Awarded |</th>
     <th>Percent Achieved |</th>
     <th>Ranking</th>
   </tr>
   <tr class="section_a">
     <td align="center">A</td>
     <td align="center">4</td>
     <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
     <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
     <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
   </tr>
   <tr>
     <td align="center">B</td>
     <td align="center">4</td>
     <td align="center"><b><div><span id="summary_section_b"></span></div></td>
     <td align="center"><b><div><span id="percent_section_b"></span></div></td>
     <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
   </tr>
   <tr>
     <td align="center">C</td>
     <td align="center">4</td>
     <td align="center"><b><div><span id="summary_section_c"></span></div></td>
     <td align="center"><b><div><span id="percent_section_c"></span></div></td>
     <td bgcolor="#92d050" align="center" id="rank_section_c"></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 section_a" onChange="calcSection('section_a')">
                      <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 section_a" onChange="calcSection('section_a')">
                       <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 section_a" onChange="calcSection('section_a')">
                       <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>2</b></td>
    <td align="center"><b><div><span id="total_section_a"></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 section_b" onChange="calcSection('section_b')">
                      <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 section_b" onChange="calcSection('section_b')">
                       <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 section_b" onChange="calcSection('section_b')">
                       <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>2</b></td>
    <td align="center"><b><div><span id="total_section_b"></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 section_c" onChange="calcSection('section_c')">
                      <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 section_c" onChange="calcSection('section_c')">
                       <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 section_c" onChange="calcSection('section_c')">
                       <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>2</b></td>
    <td align="center"><b><div><span id="total_section_c"></span></div></b></td>
  </tr>
</table>

关于javascript - 如何使用 Javascript 对 HTML 表单中的结果进行排名？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58397891/

上一篇：batch-file - 如何使用 wmic 获取特定进程的进程 ID 并检查错误？

下一篇：sql-server - 在这种特定情况下，SQL Server 会一直短路吗？

相关文章：

javascript - jQuery 将段落的内容放入文本区域

javascript - 页面加载时，如果 URL 哈希与数组中的值之一匹配，则滚动到具有匹配 data-load-id 属性的元素

html - 如何从 HTML 列表中删除缩进？

php - Javascript 填充字段值 $_POST 的 NULL？

php - 从多个表填充表单 yii2 mysql

javascript - 基于单选按钮的 jquery 启用/禁用文本框故障排除

Javascript - 如何从数组中获取非零值？

javascript - 无序列表的工具提示

javascript - 将 Vue 与 Django 一起使用

文本字段中的 HTML 表单提交按钮

©2024 IT工具网  联系我们