javascript - 对表数据进行排序

Question

谁能教我如何对用户输入的数据进行排序？我计划对表中的数据(标记)进行排序并获取结果，例如将分数从最高到最低排序。 我当前的代码需要帮助进行排序。

//Brandon Tan P1514627
//Zong Wei P151

//Javascript

//Table headers
document.write("<table><th style='width:25px'>No.</th>");
document.write("<th style='width:100px'>Name</th>");
document.write("<th style='width:100px'>Attendance</th>");
document.write("<th style='width:100px'>Homework</th>");
document.write("<th style='width:100px'>Midterm Test</th>");
document.write("<th style='width:100px'>Final Exam</th>");
document.write("<th style='width:100px'>Final Grade</th>");
document.write("<th style='width:100px'>Letter Grade</th>");

//Setting the component weightage
    do{
        var weightAtt = parseFloat(prompt("Enter the weightage of attendance"));

    while (weightAtt<=0 || weightAtt>=1 || isNaN(weightAtt)) {
        alert("The weightage of attendance must a positive number less than 1");
        var weightAtt = parseFloat(prompt("Enter the weightage of attendance"));
    }

    var weightHw = parseFloat(prompt("Enter the weightage of homework"));

    while (weightHw<=0 || weightHw>=1 || isNaN(weightHw)) {
        alert("The weightage of homework must a positive number less than 1");
        var weighthw = parseFloat(prompt("Enter the weightage of homework"));
    }

    var weightMdt = parseFloat(prompt("Enter the weightage of midterm test"));

    while (weightMdt<=0 || weightMdt>=1 || isNaN(weightMdt)) {
        alert("The weightage of midterm test must a positive number less than 1");
        var weightMdt = parseFloat(prompt("Enter the weightage of midterm test"));
    }

    var weightFx = parseFloat(prompt("Enter the weightage of final exam"));

    while (weightFx<=0 || weightFx>=1 || isNaN(weightFx)) {
        alert("The weightage of final exam must a positive number less than 1");
        var weightFx = parseFloat(prompt("Enter the weightage of final exam"));
    }
        if ([weightAtt + weightHw + weightMdt + weightFx] != 1) {
            alert("The total weightage of all components must be equals to 1!");
        }
    }
    while ([weightAtt + weightHw + weightMdt + weightFx] != 1);

//----------------------------------------------------------------------------

//Enter the number of students you want to enter the grades for    
    var numStudents = parseInt(prompt("Enter the number of students"));

    while (numStudents<=0 || isNaN(numStudents)) {
        alert("The number of students must a postive integer!");
        var numStudents = parseInt(prompt("Enter the number of students"));
    }
//Loop    
for(var i = 0; i < numStudents; i++){

    var no = i + 1;

        document.write("<tr><td style='width:25px'>" + no + "</td>");

    var name = prompt("Enter the student's name");

        document.write("<td style='width:100px'>" + name + "</td>");
//----------------------------------------------------------------------------    
    var att = parseFloat(prompt("Enter " + name + "'s attendance"));

    while (att<0 || att>100 || isNaN(att)) {
        alert("Attendance marks must be a number between 0-100!");
        var att = parseFloat(prompt("Enter " + name + "'s attendance"));
    }
        document.write("<td style='width:100px'>" + att + "</td>");
 //---------------------------------------------------------------------------       
    var hw = parseFloat(prompt("Enter " + name + "'s homework"));

    while (hw<0 || hw>100 || isNaN(hw)) {
        alert("Homework marks must be a number between 0-100!");
        var hw = parseFloat(prompt("Enter " + name + "'s homework"));
    }

        document.write("<td style='width:100px'>" + hw + "</td>");
//----------------------------------------------------------------------------    
    var mdt = parseFloat(prompt("Enter " + name + "'s midterm test"));

    while (mdt<0 || mdt>100 || isNaN(mdt)) {
        alert("Midterm Test marks must be a number between 0-100!");
        var mdt = parseFloat(prompt("Enter " + name + "'s midterm test"));
    }

        document.write("<td style='width:100px'>" + mdt + "</td>");
//----------------------------------------------------------------------------        
    var fx = parseFloat(prompt("Enter " + name + "'s final exam"));

    while (fx<0 || fx>100 || isNaN(fx)) {
        alert("Final Exam marks must be a number between 0-100!");
        var fx = parseFloat(prompt("Enter " + name + "'s final exam"));
    }

        document.write("<td style='width:100px'>" + fx + "</td>");
 //---------------------------------------------------------------------------   
    var fg = att * weightAtt + hw * weightHw + mdt * weightMdt + fx * weightFx

        document.write("<td style='width:100px'>" + fg + "</td>");
//----------------------------------------------------------------------------    
    var lg = 0;
        if(fg >= 80){
            lg = "A";
        }

        else if(fg < 80 && fg >= 70){
            lg = "B";
        }

        else if(fg < 70 && fg >= 60){
            lg = "C";
        }

        else if(fg < 60 && fg >=50){
            lg = "D";
        }
        else if (fg >= 0 && fg < 50){
            lg = "F";
        }

        document.write("<td style='width:100px'>" + lg + "</td></tr>");
}


document.write("</table>");

Answer 1

1. 删除 document.writes - 仅添加到变量并在末尾渲染变量
2. 创建学生数组 - 在本例中为学生对象数组
3. 使用对象排序对数组进行排序 Sorting an array of JavaScript objects

这是一个示例 FIDDLE

请注意，脚本/ fiddle 需要 4 个值，总共 1 个值 - 例如0.25,0.15,0.35,0.25 退出第一个循环

//Javascript
var html = "";
//Table headers
html += "<table><th style='width:25px'>No.</th>";
html += "<th style='width:100px'>Name</th>";
html += "<th style='width:100px'>Attendance</th>";
html += "<th style='width:100px'>Homework</th>";
html += "<th style='width:100px'>Midterm Test</th>";
html += "<th style='width:100px'>Final Exam</th>";
html += "<th style='width:100px'>Final Grade</th>";
html += "<th style='width:100px'>Letter Grade</th>";

//Setting the component weightage
do {
  var weightAtt = parseFloat(prompt("Enter the weightage of attendance"));

  while (weightAtt <= 0 || weightAtt >= 1 || isNaN(weightAtt)) {
    alert("The weightage of attendance must a positive number less than 1");
    var weightAtt = parseFloat(prompt("Enter the weightage of attendance"));
  }

  var weightHw = parseFloat(prompt("Enter the weightage of homework"));

  while (weightHw <= 0 || weightHw >= 1 || isNaN(weightHw)) {
    alert("The weightage of homework must a positive number less than 1");
    var weighthw = parseFloat(prompt("Enter the weightage of homework"));
  }

  var weightMdt = parseFloat(prompt("Enter the weightage of midterm test"));

  while (weightMdt <= 0 || weightMdt >= 1 || isNaN(weightMdt)) {
    alert("The weightage of midterm test must a positive number less than 1");
    var weightMdt = parseFloat(prompt("Enter the weightage of midterm test"));
  }

  var weightFx = parseFloat(prompt("Enter the weightage of final exam"));

  while (weightFx <= 0 || weightFx >= 1 || isNaN(weightFx)) {
    alert("The weightage of final exam must a positive number less than 1");
    var weightFx = parseFloat(prompt("Enter the weightage of final exam"));
  }
  if ([weightAtt + weightHw + weightMdt + weightFx] != 1) {
    alert("The total weightage of all components must be equals to 1!");
  }
}
while ([weightAtt + weightHw + weightMdt + weightFx] != 1);

//----------------------------------------------------------------------------

//Enter the number of students you want to enter the grades for    
var numStudents = parseInt(prompt("Enter the number of students"));

while (numStudents <= 0 || isNaN(numStudents)) {
  alert("The number of students must a postive integer!");
  var numStudents = parseInt(prompt("Enter the number of students"));
}
//Loop    
var students = [];

for (var i = 0; i < numStudents; i++) {
  students[i] = {}

  var name = prompt("Enter the student's name");
  students[i].name = name;

  //----------------------------------------------------------------------------    
  var att = parseFloat(prompt("Enter " + name + "'s attendance"));

  while (att < 0 || att > 100 || isNaN(att)) {
    alert("Attendance marks must be a number between 0-100!");
    att = parseFloat(prompt("Enter " + name + "'s attendance"));
  }
  students[i].att=att;
  //---------------------------------------------------------------------------       
  var hw = parseFloat(prompt("Enter " + name + "'s homework"));

  while (hw < 0 || hw > 100 || isNaN(hw)) {
    alert("Homework marks must be a number between 0-100!");
    hw = parseFloat(prompt("Enter " + name + "'s homework"));
  }
  students[i].hw=hw;

  //----------------------------------------------------------------------------    
  var mdt = parseFloat(prompt("Enter " + name + "'s midterm test"));

  while (mdt < 0 || mdt > 100 || isNaN(mdt)) {
    alert("Midterm Test marks must be a number between 0-100!");
    mdt = parseFloat(prompt("Enter " + name + "'s midterm test"));
  }
  students[i].mdt=mdt;
  //----------------------------------------------------------------------------        
  var fx = parseFloat(prompt("Enter " + name + "'s final exam"));

  while (fx < 0 || fx > 100 || isNaN(fx)) {
    alert("Final Exam marks must be a number between 0-100!");
    fx = parseFloat(prompt("Enter " + name + "'s final exam"));
  }
  students[i].fx=fx;
  //---------------------------------------------------------------------------   
  var fg = att * weightAtt + hw * weightHw + mdt * weightMdt + fx * weightFx
  students[i].fg=fg;
  //----------------------------------------------------------------------------    
  var lg = 0;
  if (fg >= 80) {
    lg = "A";
  } else if (fg < 80 && fg >= 70) {
    lg = "B";
  } else if (fg < 70 && fg >= 60) {
    lg = "C";
  } else if (fg < 60 && fg >= 50) {
    lg = "D";
  } else if (fg >= 0 && fg < 50) {
    lg = "F";
  }
  students[i].lg=lg; 
}
// here you need to sort
students.sort(function(a,b) {
  if (a.fg > b.fg) return 1;
  if (b.fg > a.fg) return -1;
  return 0;

});
for (var i = 0; i < numStudents; i++) {
  html += "<tr><td style='width:25px'>" + (i + 1) + "</td>";
  html += "<td style='width:100px'>" + students[i].name + "</td>";
  html += "<td style='width:100px'>" + students[i].att + "</td>";
  html += "<td style='width:100px'>" + students[i].hw + "</td>";
  html += "<td style='width:100px'>" + students[i].mdt + "</td>";
  html += "<td style='width:100px'>" + students[i].fx + "</td>";
  html += "<td style='width:100px'>" + students[i].fg + "</td>";
  html += "<td style='width:100px'>" + students[i].lg + "</td></tr>";
}

html += "</table>";
var div = document.createElement("div");
div.innerHTML=html;
document.body.appendChild(div);