时间戳

首页 > 解决方案 > 如何更改表中变量的值？

javascript - 如何更改表中变量的值？

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Variables with Player Data-->
<script type="text/javascript">

    //Player A
    let PlayerAMS = 0
    let PlayerATN = 0

    // Player B
    let PlayerBMS = 0
    let PlayerBTN = 0

    //Player C
    let PlayerCMS = 0
    let PlayerCTN = 0

    //Player D
    let PlayerDMS = 0
    let PlayerDTN = 0

    //Player E
    let PlayerEMS = 0
    let PlayerETN = 0

    //Player F
    let PlayerFMS = 0
    let PlayerFTN = 0

    //Player G
    let PlayerGMS = 0
    let PlayerGTN = 0


    //Player H
    let PlayerHMS = 0
    let PlayerHTN = 0

    //Player I
    let PlayerIMS = 0
    let PlayerITN = 0

    //Player J
    let PlayerJMS = 0
    let PlayerJTN = 0

    //Player K
    let PlayerKMS = 0
    let PlayerKTN = 0

    //Player L
    let PlayerLMS = 0
    let PlayerLTN = 0

    //Player M
    let PlayerMMS = 0
    let PlayerMTN = 0

    //Player N
    let PlayerNMS = 0
    let PlayerNTN = 0

    //Player O
    let PlayerOMS = 0
    let PlayerOTN = 0

    //Player P
    let PlayerPMS = 0
    let PlayerPTN = 0

    //Player Q
    let PlayerQMS = 0
    let PlayerQTN = 0
</script>

<table id="dataTable" border="1">

    <!-- Headers -->
    <tr>
        <th>Player Number</th>
        <th>Missed Serves</th>
        <th>Touched Net</th>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td>
        </td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td>
            <div contenteditable="true">Player Number Here</div>
        </td>
        <td></td>
        <td></td>
    </tr>

</table>

<button type="button" onclick="incrementAMS()">Increment Player 1 MS</button>
<button type="button" onclick="DecrementAMS()">Decrement Player 1 MS</button>
<button class="button" onclick="update()">Update</button>

<script type="text/javascript">


    let array = [[PlayerAMS, PlayerATN],
                 [PlayerBMS, PlayerBTN],
                 [PlayerCMS, PlayerCTN],
                 [PlayerDMS, PlayerDTN],
                 [PlayerEMS, PlayerETN],
                 [PlayerFMS, PlayerFTN],
                 [PlayerGMS, PlayerGTN],
                 [PlayerHMS, PlayerHTN],
                 [PlayerIMS, PlayerITN],
                 [PlayerJMS, PlayerJTN],
                 [PlayerKMS, PlayerKTN],
                 [PlayerLMS, PlayerLTN],
                 [PlayerMMS, PlayerMTN],
                 [PlayerNMS, PlayerNTN],
                 [PlayerOMS, PlayerOTN],
                 [PlayerPMS, PlayerPTN],
                 [PlayerQMS, PlayerQTN],
    ]

    console.log(array)

    table = document.getElementById("dataTable");

    function update() {
        // rows
        for (let i = 1; i < table.rows.length; i++) {
            // cells
            for (let j = 1; j < table.rows[i].cells.length; j++) {
                table.rows[i].cells[j].innerHTML = array[i][j - 1];
            }
        }
    }

    function incrementAMS(){
        PlayerAMS++;
        console.log(PlayerAMS);
    }

    function incrementATN(){
        PlayerATN++;
        console.log(PlayerATN);
    }

    function DecrementAMS(){
        PlayerAMS--;
        console.log(PlayerAMS);
    }

    function DecrementATN(){
        PlayerATN--;
        console.log(PlayerATN);
    }



</script>

</body>
</html>

我正在制作一个表格，我只需按下一个按钮，单元格内的特定值就会增加。而我拥有的功能确实做到了这一点，正如我在控制台中检查它时增加的值所证明的那样。但是，我不能让它显示在表格中，并且单元格中的值只是保持在 0。我怎样才能使它的值实时增加，或者在我点击更新按钮之后？

标签： javascript

解决方案

数组从零开始。

table.rows[i].cells[j].innerHTML = array[i-1][j - 1];

您正在更新，PlayerAMS但数组值正在用于显示。您只需更改索引即可更新其他玩家。您还应该像这样更改递减函数。

function incrementAMS(){
    array[0][0]++;
    console.log(array[0][0]);
    update();
}

推荐阅读