Question

功能性：

我有一串数据=＆gt;（＆＃34; A，4.0.00：04 @ B，5.0,00：05 @ C，9.0,00：09 @ ......＆＃34 ）。字符串将拆分为单个元素，单个元素将附加到表中的标记。因此，它看起来像：

A 00:04
B 00:05
C 00:09 ....
G 00:29

问题：

目前，整个表格看起来像这样：

G 00:29 2。 3。 ..... 10。

因此，数据的最后一个值只是附加到表的第一行。我不确定这是否是填充内部的正确方法。请帮忙。

代码：

＆＃13;

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]);
}

＆＃13;

#Rugby_Scoreboard {
  position: absolute;
  left: 335px;
  top: 182px;
  width: 825px;
  height: 818px;
  border-spacing: 5px;
  border-collapse: collapse;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

您可以使用解构分配和尾随逗号从4.0的结果中排除.split()，在jQuery()使用多个选择器，调用.html(function)设置html两个元素

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>

Answer 2

所有这些代码正在替换一组元素的内容。

将此部分放在循环中：

$("#Player_Name").html(innerList[0]);
$("#Player_Score").html(innerList[2]);

你一遍又一遍地替换相同的内容。

如果您希望每个值都显示在表格中，则需要创建新的<tr>元素，并将它们附加到<table>元素的末尾。

$('#Rugby_Scoreboard').append('<tr><td><div id="Player_Name_' + innerList[0] + '">' + 
                                    innerList[2] + 
                              '</div></td></tr>`);

无法动态地将数据列表填充到表中

2 个答案: