Question

如何在<input type="text">中键入2个玩家名称，然后使用JavaScript在<th>中使用innerHTML为<table>写出<th>标记？

这是一个JSFiddle： JSFiddle

Answer 1

是的，你必须使用innerHTML。请看下面的代码片段。请注意，您应该为您的html元素提供不同的ID。元素的id应该是唯一的。

＆＃13;

function saveNames(){

    // get the first's player name.
    var player1name = document.getElementById("player1name").value;
  
    // get the second's player name.
    var player2name = document.getElementById("player2name").value;
  
    // set the first's player name in the corresponding th.
    document.getElementById("player1").innerHTML = player1name;
  
    // set the second's player name in the corresponding th.
    document.getElementById("player2").innerHTML = player2name;
}

＆＃13;

table {
    border-collapse: collapse;
    margin:10px;
}
table, th, td {
    border: 1px solid black;
    padding:5px;
}
td {
    text-align:center;
    width:60px;
}

＆＃13;

<div class="playerinputsection">
    <label for="player1name">Player 1</label>
    <br>
    <input type="text" name="playernames" id="player1name">
</div>
<div class="playerinputsection">
    <label for="player2name">Player 2</label>
    <br>
    <input type="text" name="playernames" id="player2name">
</div>
<br>
<button onclick="saveNames()">Save names</button>
<br>
<br>
<table>
    <tr>
        <th id="player1"></th>
        <th id="player2"></th>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
    </tr>
</table>

＆＃13;

对于喜欢此类的方案，使用MVVM库（如Knockout.js）会更优雅。但是，使用纯JavaScript可以获得相同的结果。当您需要构建更复杂的UI时，上面提到的库显示了它的强大功能。

输入type =“text”到innerHTML

1 个答案: