Funcionalidad:
Tengo una Cadena de datos =>("A, 4.0. 00:04@B,5.0,00:05@C,9.0,00:09@......"). La cadena se dividirá en un elemento individual y el elemento individual se agregará a la etiqueta en la tabla. Por lo que, se verá como:
Tema:
Actualmente, toda la tabla se ve así:
Por lo tanto, el último valor de los datos se agrega a la primera fila de la tabla. No estoy seguro de si este es el método correcto para completar el archivo . Por favor ayuda.
Código:
console.log("Leaderboard: " + data); var playerList = data.split("@"); var innerList; for (i = 0; i < playerList.length; i++) { innerList = playerList[i].split(","); console.log(innerList[0] + "|" + innerList[1] + "|" + innerList[2]); //innerList[0] ==> A to be appended to Player_Name //innerList[1] ==> 4.0 not needed to be appended //innerList[2] ==> 00:04 to be appended to Player_Score $("#Player_Name").html(innerList[0]); $("#Player_Score").html(innerList[2]); } #Rugby_Scoreboard { position: absolute; left: 335px; top: 182px; width: 825px; height: 818px; border-spacing: 5px; border-collapse: collapse; } <!-- ScoreBoard -Table form--> <div id="Game_LeaderBoard" style="position:absolute; z-index:6; top:0px; left:0px; width: 1920px; heigth: 1000px; margin:auto;"> <table id="Rugby_Scoreboard"> <tr> <td> <div id="Player_Name" style="z-index:50; position:absolute; top:5px; left:150px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;"> <font face="OpenSans-Light"></font> </div> </td> <td> <div id="Player_Score" style="z-index:50; position:absolute; top:5px; left:700px; font-size:40px; font-family:'OpenSans-Light'; width:1080; color:#fff;"> <font face="OpenSans-Light"></font> </div> </td> </tr> </table> </div>Puede usar la asignación de desestructuración y la coma final para excluir 4.0 del resultado de .split() , use selectores múltiples en jQuery() , llame a .html(function) para configurar html de ambos elementos
var data = "A,4.0,00:04@B,5.0,00:05@C,9.0,00:09"; console.log("Leaderboard: " + data); var playerList = data.split("@"); console.log(playerList) var innerList; for (i = 0; i < playerList.length; i++) { var [name,,score] = playerList[i].split(","); //innerList[0] ==> A to be appended to Player_Name //innerList[1] ==> 4.0 not needed to be appended //innerList[2] ==> 00:04 to be appended to Player_Score $("#Player_Name, #Player_Score") .html(function(index, html) { var prop = index === 0 ? name : score; return html + prop + "<br>" }) } /* #Rugby_Scoreboard { position: absolute; left: 335px; top: 182px; width: 825px; height: 818px; border-spacing: 5px; border-collapse: collapse; } */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ScoreBoard -Table form--> <div id="Game_LeaderBoard" style=""> <table id="Rugby_Scoreboard"> <tr> <td> <div id="Player_Name" style=""> <font face="OpenSans-Light"></font> </div> </td> <td> <div id="Player_Score" style=""> <font face="OpenSans-Light"></font> </div> </td> </tr> </table> </div>Todo lo que hace este código es reemplazar el contenido de un conjunto de elementos.
Con esta parte dentro del ciclo:
$("#Player_Name").html(innerList[0]); $("#Player_Score").html(innerList[2]);Está reemplazando los mismos contenidos una y otra vez.
Si desea que cada uno de los valores se muestre en la tabla, debe crear nuevos elementos <tr> y agregarlos al final del elemento <table> .
$('#Rugby_Scoreboard').append('<tr><td><div id="Player_Name_' + innerList[0] + '">' + innerList[2] + '</div></td></tr>`);