javascript - 动态改变js和html中变量的值

Question

我有一个 html 值表和一个变量 player .当用户点击表格中的某个值时，我想设置 player到那个特定的值。 (例如，如果用户点击“Alex Brown”，我想设置 var player = Alex Brown。

    <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Marco Foo
                      </td>
                  </tr>
                  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
                      <td>
                          Alex Brown
                      </td>
                  </tr>

到目前为止，我已经尝试了下面的代码，但我认为这会重置 player 的值对于表格中的每个元素

    <td id="player">
    <script>
        var player = "Leno Morales";
        document.getElementById("player").innerHTML = player;
    </script>

谢谢!

编辑:

我对代码做了几处修改。首先，我添加了一段js代码

    <script>
    var player;
    function setValue(){
        player=getElementById("player").innerHTML;
    }
    </script>

对于表中的每个元素，我都添加了函数 setValue()到 <tr>标签，像这样:

    <tr onmouseover="this.style.backgroundColor='#ffff66'; "onmouseout="this.style.backgroundColor='#d4e3e5'; "onclick="location.href='#individualwellness'; setValue();">
    <td id="player">
        Leno Morales
    </td>

不幸的是，我的变量player当用户点击某一行时没有被设置!

Answer 1

首先，我会给您的列一个类名，以便通过事件准确定位它们

<td class="playerColumn">Marco Foo</td>
...
<td class="playerColumn">Alext Brown</td>

然后假设您想在此结果区域中填充玩家名称

 <div id="playerResult"></div>

getElementById 不适用于这种情况。这是 jQuery 中的事件处理程序

// declare the variable in global scope.
var player;
$('.playerColumn').on('click',function(evt){
    player = $(this).text();
    $('#playerResult').html(person);
});