JS如何在循环生成的表格中计算？

Question

网页从服务器端请求了一串JSON数据，里面是一个字典。通过这个字典在网页上使用循环生成了一个表格。
姓名 语文 数学 英语
张三 89 78 67
李四 78 98 87
王五 66 87 99
但现在需要生成的最终样式是：
姓名 语文 数学 英语 总分 排名
张三 89 78 67 223 2
李四 78 98 87 245 1
王五 66 87 99 216 3
也就是说，需要在表格完成后进行一次计算，加入总分和排名2个字段。
而这个表格的行数也是不确定的，可能是3行，也可能是30行，取决于服务器给出的字符串长度。
不能改服务器端程序，只能改前端，请问应该怎么操作？

Answer 1

按照以下步骤，应该能完成你的需求

1 获取表格数据：通过 JavaScript 获取生成的表格数据，可以使用 document.getElementsByTagName() 或 document.querySelectorAll() 方法获取表格元素。
计算总分：对每个学生的成绩进行加总，可以使用 JavaScript 循环遍历表格中的每一行数据，并将每个学生的语文、数学和英语成绩相加，得出总分。
2 计算排名：根据总分计算每个学生的排名，可以使用 JavaScript 对表格数据进行排序，并将排序结果赋值给表格，然后根据排序结果计算每个学生的排名。
3 更新表格内容：将计算出的总分和排名更新到表格中的对应行中，可以使用 JavaScript 循环遍历表格数据，并将总分和排名插入到对应行的单元格中。

由于不知道设置变量名，这里给一个参考代码吧

// 获取表格数据
const table = document.querySelector('table');
const rows = table.getElementsByTagName('tr');

// 计算总分和排名
let studentScores = [];
for (let i = 1; i < rows.length; i++) {
  const cells = rows[i].getElementsByTagName('td');
  const name = cells[0].innerText;
  const chineseScore = parseInt(cells[1].innerText);
  const mathScore = parseInt(cells[2].innerText);
  const englishScore = parseInt(cells[3].innerText);
  const totalScore = chineseScore + mathScore + englishScore;
  studentScores.push({ name, totalScore });
}

studentScores.sort((a, b) => b.totalScore - a.totalScore);

for (let i = 0; i < studentScores.length; i++) {
  const row = rows[i + 1];
  const cells = row.getElementsByTagName('td');
  cells[4].innerText = studentScores[i].totalScore;
  cells[5].innerText = i + 1;
}