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

我试图用javascript创建动态排行榜

2 个答案: