如何在内置HTML的表单中使用JavaScript对某些总值进行排序？

我有一个简单的HTML表单。共有3个部分（A、B和C部分）。当用户填写表单时，通过显示总分和百分比来计算每个部分。我想排名分数，并显示在排名栏，但似乎无法计算如何做到这一点。例如，如果A部分得4分，B部分得3分，C部分得0分，则A部分得1分，B部分得2分，C部分得3分。另外，在填写表格时更改排名也很理想

我是JavaScript新手，在如何逻辑实现这一点上遇到了困难。这只是我表格的一个样本。我有一个更大的表格，有更多的部分和问题。请运行我的代码，以便您可以看到更好的视觉效果。任何代码片段和建议，将帮助我将不胜感激。另外，如果您可以保持我的代码不变，因为我有更多的代码，这取决于我的代码的结构。我知道我的代码不是最好的

我曾尝试在JavaScript中使用if语句，但正如我所说的，我不知道如何在逻辑上做到这一点

函数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；
//返回值的总和
返回[parseInt（Aa1Val），parseInt（Ab1Val），parseInt（Ac1Val）]。减少（（a，c）=>a+c，0）
}
函数1（）{
显示suma（）
}
函数displaySumA（）{
document.getElementById（'totalA'）。textContent=calcSumA（）
document.getElementById（'TotalASummary'）。textContent=calcSumA（）
document.getElementById（'TotalApertent'）。textContent=Math.ceil（calcSumA（）/4*100）+'%
}
函数calcSumA（）{
返回1R（）
}
函数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；
//返回值的总和
返回[parseInt（Ba1Val）、parseInt（Bb1Val）、parseInt（Bc1Val）]。reduce（（a，c）=>a+c，0）
}
函数calcB1（）{
displaySumB（）
}
函数displaySumB（）{
document.getElementById（'totalB'）。textContent=calcSumB（）
document.getElementById（'TotalBSummary'）。textContent=calcSumB（）
document.getElementById（'TotalBPercent'）。textContent=Math.ceil（calcSumB（）/4*100）+'%
}
函数calcSumB（）{
返回calcB1R（）
}
函数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；
//返回值的总和
返回[parseInt（Ca1Val）、parseInt（Cb1Val）、parseInt（Cc1Val）]。减少（（a，c）=>a+c，0）
}
函数calcC1（）{
显示sumc（）
}
函数display sumc（）{
document.getElementById（'totalC'）。textContent=calcSumC（）
document.getElementById（'TotalCSummary'）。textContent=calcSumC（）
document.getElementById（'TotalCPercent'）。textContent=Math.ceil（calcSumC（）/4*100）+'%
}
函数calcSumC（）{
返回calcC1R（）
}

类别|
可能的要点|
奖励分数|
完成百分比|
排名
A.
4.
B
4.
C
4.
A节。
A.1
价值
授予
（a）
1.
0
1.
（b）
1.
0
1.
（c）
2.
0
2.
A节总计
4.
B节。
B.1
价值
授予
（a）
1.
0
1.
（b）
1.
0
1.
（c）
2.
0
2.
B节.总数
4.
C节。
C.1
价值
授予
（a）
1.
0
1.
（b）
1.
0
1.
（c）
2.
0
2.
C节总计
4.

如果我正确理解了您的问题，您只想根据用户在这三个部分中的表现，在这三个部分的“排名”列中添加一个数字

您应该能够只比较“实现百分比”列的文本内容（我假设这就是您想要比较的内容）

下面是我要做的（在给顶部表格一个“results”ID之后）：

函数计算器（）{
//抓取包含百分比的所有跨度
const span=document.querySelectorAll（“#results td:n个子（4）span”）；
//列出对象，组成百分比及其相应的等级列
常数百分比=[]；
用于（连续跨度）{
推({
//选择相邻排名列的一些方法：
e:span.parentElement.nextSibling，//您在编写排名算法或其他方面有困难吗？我可以看到您可以在用户输入更改时更新HTML，所以这不是问题。
function calculateRankings() {
  // grab all the spans that hold the percentages
  const spans = document.querySelectorAll('#results td:nth-child(4) span');

  // make a list of objects, making up a percentage and its corresponding rank column 
  const percentages = [];
  for (const span of spans) {
     percentages.push({
       //some way to select the neighboring rankings column:
       e: span.parentElement.nextSibling, // <<---- YOU'LL HAVE TO CHANGE THIS!!
       p: Number(span.innerText.replace('%', ''))
     });
  }

  // sort based on the percentage field of each object 
  percentages.sort((a, b) => a.p - b.p);

  // place an index based on the order of the list 
  for (let i = 0; i < percentages.length; i++) {
    percentages[i].e.innerText = i + 1;
  }
}