我一直在尝试使用javascript创建动态排行榜

Question

基本上，我只是试图创建一个表，一旦用户填写了玩家名称和玩家评分字段并按下提交就会自动更新。我正在尝试使这种动态只有纯JavaScript。

这里的HTML：

<table style="width:100%" id="player"> 
     <tr> 
     <td>Player</td> 
     <td>Score</td> 
     </tr> 
    </table> 
    </br> 
    </br> 

    <form> 
    Player Name: <input type="text" name="FirstName" id="player_name"><br> 
    Player Score: <input type="text" name="LastName" id="player_score"><br> 
    <input type="submit" onclick= "submittedData()"> 
</form> 


    <script type="text/javascript" src="index.js"></script> 

所以，我有表和输入栏中的所有市场，一个ID，这样我就可以通过的getElementById（）函数抓住它。

var player = 0, score, newTablerow; 


function getID(x){ 
    document.getElementById(x); 
} 


function submittedData(){ 

player = getID("player_name").value; 
score = getID("player_score").value; 
newTablerow = getID("player"); 


var a = document.createElement("TR"); 
var b = document.createTextNode(player); 
a.appendChild(b); 
var c = document.createElement("TD"); 
var d = document.createTextNode(score); 
c.appendChild(d); 

getID("player").appendChild(a); 
getID("player").appendChild(c); 


} 

当我在输入信息后点击按钮，没有任何反应。没有行正在创建，我觉得我动态创建行的方式显然有些问题。另外，它对所有变量看起来都非常难看，所以我想知道是否有办法让代码更少。所以基本上，这是非常简单的，用户只需在输入字段中输入玩家的名字和得分，玩家的名字和得分就会自动添加到表格中。

控制台也没有给我任何错误信息。

任何帮助/提示/提示将不胜感激。

Answer 1

从MDN appendChild：

返回的值是附加的儿童。

所以，当你写：

var x = a.appendChild(b); 
... 
var y = c.appendChild(d); 

x和y成为b和d分别不a和c，因为它似乎你承担。

解决您的问题，重新定义你submittedData为类似如下：

function submittedData(){ 

player = getID("player_name").value; 
score = getID("player_score").value; 
newTablerow = getID("player"); 

var tr = document.createElement("TR"); 
var td1 = document.createElement("TD"); 
var td2 = document.createElement("TD"); 
var name = document.createTextNode(player); 
var top = document.createTextNode(score); 

td1.appendChild(name); 
td2.appendChild(top); 

tr.appendChild(td1); 
tr.appendChild(td2); 

getID("player").appendChild(tr); 

} 

另一个原因，你中间的解决方案没有工作是因为你的JavaScript您最初创建一个看起来像这样的DOM ：

<table id="player"> 
    ... 
    <!-- attempted to append the following --> 
    <tr> <!-- a --> 
     player <!-- b --> 
    </tr> 
    <td> <!-- c --> 
     score <!-- d --> 
    </td> 
</table> 

虽然我的解决方案创建这样的：

<table id="player"> 
    ... 
    <!-- attempted to append the following --> 
    <tr> <!-- tr --> 
     <td> <!-- td1 --> 
      player <!-- name --> 
     </td> 
     <td> <!-- td2 --> 
      score <!-- top --> 
     </td> 
    </tr> 
</table> 

有用的提示：使用有意义的变量名称，以便您可以更清楚地看到您正在做的事情。

Answer 2

制作以下方法返回一个值：

var getID = function(x){ 
    return document.getElementById(x); 
} 

而且，你被追加新的要素是有点搞砸的方式。我建议使用描述性变量名称。下面是一个工作版本：

var submitData = function(){ 

    var player = getID("player_name").value; 
    var score = getID("player_score").value; 

    var playerCell = document.createElement("TD"); 
    var playerCellText = document.createTextNode(player); 
    playerCell.appendChild(playerCellText); 

    var scoreCell = document.createElement("TD"); 
    var scoreCellText = document.createTextNode(score); 
    scoreCell.appendChild(scoreCellText); 

    var row = document.createElement("TR"); 
    row.appendChild(playerCell); 
    row.appendChild(scoreCell); 

    getID("player").appendChild(row); 
}; 

最后，因为你不希望将数据上传到服务器端，使按钮不是一个submit之一：

<input type="button" onclick= "submitData()" value="Submit"/> 

见JSFiddle demo