Javascript 根据表格格式中的标记按升序对数组排序_Javascript_Arrays_Json_Sorting

Javascript 根据表格格式中的标记按升序对数组排序

javascript arrays json sorting

Javascript 根据表格格式中的标记按升序对数组排序,javascript,arrays,json,sorting,Javascript,Arrays,Json,Sorting,学生在考试中的分数正在录入。我实现了排序，但它不能正常工作，就像我输入标记时，它不能以升序或降序更新表一样。问题是，当我输入标记时，它已添加到表中，但不是按升序，但当我输入下一个数字时，它会按升序更新以前的标记，但不是当前标记。请帮助我获取输出请帮助我获取输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

学生在考试中的分数正在录入。我实现了排序，但它不能正常工作，就像我输入标记时，它不能以升序或降序更新表一样。问题是，当我输入标记时，它已添加到表中，但不是按升序，但当我输入下一个数字时，它会按升序更新以前的标记，但不是当前标记。请帮助我获取输出请帮助我获取输出

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="SectionB.css">
    <title>Document</title>
</head>
<body>
     Name : <input type="text" id="txt1">
     Marks : <input type="text" id ="txt2">
     <button onclick="add()">Add</button><br/>
     <div></div><br/>
    <div id="btntxt"></div><br/>
    <div id="heading"></div>
     <div id="txt"></div><br/>
    
</body>
<script>
     var data=[];
     
       function add()

     {
        var btntext1=document.getElementById('btntxt');
        btntext1.innerHTML="Filter marks : "+"  <input type='text' id='txt3''><button onclick='filter()'>Filter</button>"
         var name1=document.getElementById('txt1').value;
         var marks1=document.getElementById('txt2').value;
         var per={"name":name1,"marks":marks1};
         data.push(per);
         console.log(data);
         let len = data.length;
         console.log(len)
         let str ="";
         var ele=document.getElementById('heading');
         ele.innerHTML= "<div class='divcell20'> Name </div><div class='divcell10'> Marks </div>";
  
        for(let i=0;i<len;i++)
        {
            let pr = data[i];
           
            console.log(pr);
            var ele1=document.getElementById('txt');
           
            if(pr.marks>60){
                var name1="<div class='cell22'>"+pr.name+"</div>";
                  var marks1="<div class='cell22'>"+pr.marks+"</div>";
            }
       else   if(pr.marks>40 && pr.marks<60)
            {
                var name1="<div class='cell23'>"+pr.name+"</div>";
                  var marks1="<div class='cell23'>"+pr.marks+"</div>";
            }
           else {
                var name1="<div class='cell24'>"+pr.name+"</div>";
                  var marks1="<div class='cell24'>"+pr.marks+"</div>";
            }

            let row="<div>"+name1+marks1+"</div>";
            
            str = str + row;
            
        }
        let table = document.getElementById("txt");
        data.sort(compareMarks);
        table.innerHTML = str;
        
     }
    

     function compareMarks(prod1,prod2)
     {
         if(prod1.marks>prod2.marks)
         return 1;
         if(prod1.marks==prod2.marks)
         return 0;
         if(prod1.marks<prod2.marks)
         return -1;
     }

     function filter()
     {
         var filt=document.getElementById("txt3").value;
         var arr1 = data.filter(n => n.marks>filt);
        console.log(arr1);
         let len = arr1.length;
         console.log(len)
        let str ="";
        var ele=document.getElementById('heading');
     ele.innerHTML= "<div class='divcell20'> Name </div><div class='divcell10'> Marks </div>";
  
        for(let i=0;i<len;i++)
        {
            let pr = arr1[i];
            if(pr.marks>60){
                var name1="<div class='cell22'>"+pr.name+"</div>";
                  var marks1="<div class='cell22'>"+pr.marks+"</div>";
            }
       else   if(pr.marks>40 && pr.marks<60)
            {
                var name1="<div class='cell23'>"+pr.name+"</div>";
                  var marks1="<div class='cell23'>"+pr.marks+"</div>";
            }
           else {
                var name1="<div class='cell24'>"+pr.name+"</div>";
                  var marks1="<div class='cell24'>"+pr.marks+"</div>";
            }
            let row="<div>"+name1+marks1+"</div>";
            str = str + row;
            data.sort(compareMarks);
        }
        let table = document.getElementById("txt");
        table.innerHTML = str;   
     }
</script>
</html>

.cell40 
{
    display: inline-block;
    width: 28%;
    text-align: center;
    background-color: grey;
    color: white;
    margin: 1px;
}
.cell15 
{
    display: inline-block;
    width: 13%;
    text-align: center;
    background-color: grey;
    color: white;
    margin: 1px;
}
.divcell10{
    display: inline-block;
    width: 22%;
    text-align: center;
    background-color: black;
    border: 1px solid black;
    color: white;
    
}
.divcell20{
    display: inline-block;
    width: 22%;
    text-align: center;
    margin: 1px;
    background-color: black;
    border: 1px solid black;
    color:white;
    
}
.cell22{
    display: inline-block;
    width: 22%;
    text-align: center;
    border: 1px solid black;
    color: black;
    margin: 1px;
    background-color: green;
}
.cell23{
    display: inline-block;
    width: 22%;
    text-align: center;
    border: 1px solid black;
    color: black;
    margin: 1px;
    background-color: gray;
}
.cell24{
    display: inline-block;
    width: 22%;
    text-align: center;
    border: 1px solid black;
    color: black;
    margin: 1px;
    background-color: red;
}