Question

我正在学习HTML和JavaScript。我做了一个足球联赛表格，并且愿意建立一个自动系统来更新该表格上的值。
这是表的代码：

<table width="60%" border="0" style="text-align:center;">
    <tr class= "promotion_row" style="background:#01DF01;">
        <td id="position">1</td>  <!-- Position -->
        <td id="team" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td id="played">11</td> <!-- Played Matches -->
        <td id="wins">8</td>  <!-- Wins -->
        <td id="draws">1</td>  <!-- Draws -->
        <td id="loses">2</td>  <!-- Loses -->
        <td id="goalsInFavour" value="14" onChange="Count(btn1)">14</td> <!-- Goals in favour -->
        <td id="goalsAgainst" value="6" onChange="Count(btn2)">6</td>  <!-- Goals against -->
        <td id="goalsDifference" value="">8</td>  <!-- Goals Difference -->
        <td id="Points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>

还有这个脚本：

function Count(btn1, btn2)
{
    var x = btn1.value;
    var y = btn2.value;
    var res = document.getElementById("goalsDifference");

    if(res.value == "")
    {
        res.value = parseInt(btn1.value);
    }

    res.value = parseInt(res.value) - parseInt(y);
}

window.addEventListener("load",Count(btn1, btn2))

我想做的是在开始时显示目标差异（这就是我添加addEventListener的原因），但事实并非如此。
同样，该功能的思想是它可以动态更改目标差异单元格中的值。如果我通过总结球队在上一场比赛中获得的进球来改变目标（我会在完成比赛时做到这一点，同时还要反对），我希望目标能够自动改变为新的价值计算目标差并将其显示在相应的单元格上。
有办法吗？如果需要，我将提供更多详细信息，也许我跳过了一些

Answer 1

根据您的问题，您可能需要找到两个值之间的差异，这两个值将从表的测试框中获取。我添加了两个文本框，并在keyup事件中找到了不同的

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      
   </head>
   <body>
      <div id = "app">
    <table width="60%" border="0" style="text-align:center;">
    <tr class= "promotion_row" style="background:#01DF01;">
        <td id="position">1</td>  <!-- Position -->
        <td id="team" align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td id="played">11</td> <!-- Played Matches -->
        <td id="wins">8</td>  <!-- Wins -->
        <td id="draws">1</td>  <!-- Draws -->
        <td id="loses">2</td>  <!-- Loses -->
        <td><input type="text" value="14" id="goalsInFavour" onkeyup="return Count();" /></td> <!-- Goals in favour -->
        <td><input type="text" value="10" id="goalsAgainst"  onkeyup="return Count();" /></td>  <!-- Goals against -->
        <td><span id="goalsDifference"></span></td>  <!-- Goals Difference -->
        <td id="Points"><b>25</b></td>  <!-- Points -->
    </tr>
</table>
</div>
<script>
    function Count() {
      
        var x = document.getElementById("goalsInFavour").value;
        var y = document.getElementById("goalsAgainst").value;
        var res = document.getElementById("goalsDifference");
        
        res.innerText = parseInt(x) - parseInt(y);
    }

</script>
</body>
</html>

汇总2个动态单元格值

1 个答案: