如何修改表格绑定的JavaScript变量值并实现表格数据同步更新？

• 数值类型是值传递，你初始化array数组时仅将PlayerAMS等变量的初始值0复制进了数组，后续修改这些独立变量时，数组内的数值不会同步更新，导致update函数读取的始终是初始的0值。
• 原代码的数组索引存在错误：表格第一行是表头，玩家行从索引1开始，而数组的第一位玩家数据索引为0，原代码直接用array[i][j-1]取值会出现索引错位、越界问题。

方案1：最小改动适配原有代码 #

仅修改update函数，每次调用时重新生成数组获取最新的变量值，同时修复索引错误：

function update() {
    // 每次更新前重新拉取最新变量值生成数组
    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],
    ]
    // 遍历表格更新内容，修正索引为i-1匹配数组
    for (let i = 1; i < table.rows.length; i++) {
        for (let j = 1; j < table.rows[i].cells.length; j++) {
            table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
        }
    }
}

如果不需要点击更新按钮、要实现变量变更后实时同步，只需要在每个增减函数的末尾调用update()即可，示例：

function incrementAMS(){
    PlayerAMS++;
    console.log(PlayerAMS);
    update(); // 新增这行触发实时更新
}

方案2：优化代码结构（推荐） #

删除零散的玩家变量，直接用统一数组存储所有玩家数据，维护成本更低：

// 初始化17位玩家的统计数据，每个元素格式为[发球失误数, 触网数]
const playerStats = Array(17).fill(0).map(() => [0, 0])
const table = document.getElementById("dataTable");

// 统一更新表格函数
function update() {
    for (let i = 1; i < table.rows.length; i++) {
        table.rows[i].cells[1].innerHTML = playerStats[i-1][0];
        table.rows[i].cells[2].innerHTML = playerStats[i-1][1];
    }
}

// 玩家1发球失误增减示例，其他玩家逻辑可复用，也可封装成通用函数传参调用
function incrementAMS(){
    playerStats[0][0]++;
    console.log(playerStats[0][0]);
    update();
}

function DecrementAMS(){
    playerStats[0][0]--;
    console.log(playerStats[0][0]);
    update();
}

内容的提问来源于stack exchange，提问作者Ahmed Moustafa