使用 Javascript 对数据库中的列表进行排序答案

【问题标题】：Sort a list on a Database with Javasctipt使用 Javascript 对数据库中的列表进行排序
【发布时间】：2021-09-26 18:43:11
【问题描述】：

我输入数据（姓名和分数），我希望它们在输入列表时按分数排序。

我希望数据按顺序排列在底部。我输入了数据，但它们仍然按照放置的顺序保留。

谢谢

代码：

function capturar(){
   function Persona(nombre, puntos){
       this.nombre = nombre;
       this.puntos = puntos;
   }
   var nombreCapturado = document.getElementById("nombre").value;
   var puntosCapturados = document.getElementById("puntos").value;
    nuevoPersona = new Persona (nombreCapturado, puntosCapturados);
   console.log(nuevoPersona);
   baseDatos.sort((a,b) => {
    if(a.puntos < b.puntos){
        return -1;
    }
    if (a.puntos > b.puntos){
        return 1;
    } 

    return 0;
});
[enter link description here][1]
   guardarData();


}

var baseDatos=[];
function guardarData(){
    baseDatos.push(nuevoPersona);
    
    document.getElementById("tabla").innerHTML+= '<td class="td">'+nuevoPersona.nombre+' </td><td class="td">'+nuevoPersona.puntos+'</td>';
    console.log("la base de datos con : "+nuevoPersona.nombre + " puntos : " +nuevoPersona.puntos);
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/puntaje.js"></script>
    <title>WebApp de Mejor Puntaje</title>
</head>
<body>
    
    <main>
        <h1 class="TituloH1">Ingresa el puntaje para ver en que posiscion quedaste</h1>
        <div id="DataInput">
            <Input class="InpPunt" placeholder="Igresa tu nombre" id="nombre" required></Input>
            <Input class="InpPunt" placeholder="Igresa tus Puntos" type="number" id="puntos" required></Input>
            <button class="BtnData" onclick="capturar()">SAVE</button>
        </div>

        <div class="puntajesAll">
            <table class="table" id="tabla">
                <thead class="thead">
                    <tr>
                        <th class="thName">Puntos </th>
                        <th class="thName">Nombre</th>
                    </tr>
                </thead>
                <tbody class="tbody">
                    
                    

                </tbody>
            </table>

        </div>
    </main>
</body>

</html>

【问题讨论】：

标签： javascript arrays forms sorting web

【解决方案1】：

 var baseDatos=[];
   function capturar(){
   function Persona(nombre, puntos){
       this.nombre = nombre;
       this.puntos = puntos;
   }
   var nombreCapturado = document.getElementById("nombre").value;
   var puntosCapturados = document.getElementById("puntos").value;
     nuevoPersona = new Persona (nombreCapturado, puntosCapturados);
  

    baseDatos.push(nuevoPersona);

   baseDatos.sort((a,b) => {

   return a.puntos-b.puntos;
});
   
  //console.log(baseDatos);
//[enter link description here][1]
  guardarData();


}
 

function guardarData(){
   let tabla=document.getElementById("tabla").getElementsByTagName('tbody')[0]; 

    tabla.innerHTML='';
    baseDatos.forEach(arr=>{
 
   tabla.innerHTML+= '<td class="td">'+arr.nombre+' </td><td class="td">'+arr.puntos+'</td>';
 //console.log("la base de datos con : "+arr.nombre + " puntos : " +arr.puntos);

    })
    
};

 <main>
        <h1 class="TituloH1">Ingresa el puntaje para ver en que posiscion quedaste</h1>
        <div id="DataInput">
            <Input class="InpPunt" placeholder="Igresa tu nombre" id="nombre" required></Input>
            <Input class="InpPunt" placeholder="Igresa tus Puntos" type="number" id="puntos" required></Input>
            <button class="BtnData" onclick="capturar()">SAVE</button>
        </div>

        <div class="puntajesAll">
            <table class="table" id="tabla">
                <thead class="thead">
                    <tr>
                        <th class="thName">Puntos </th>
                        <th class="thName">Nombre</th>
                    </tr>
                </thead>
                <tbody class="tbody">
                    
                    

                </tbody>
            </table>

        </div>
    </main>

【讨论】：

非常感谢，帮了大忙！！！ +1