Javascript HTML表格单元格值计数器_Javascript_Html

Javascript HTML表格单元格值计数器

javascript html

Javascript HTML表格单元格值计数器,javascript,html,Javascript,Html,我正在学习HTML和JavaScript。我做了一个足球联赛表格，我愿意制作一个自动系统来更新表格上的值。这是表的代码： <table width="60%" border="0" style="text-align:center;"> <tr style="background:#01DF01;"> <td>1</td>  <td align="lef

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

<table width="60%" border="0" style="text-align:center;">
    <tr style="background:#01DF01;">
        <td>1</td>  <!-- Position -->
        <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
        <td>11</td> <!-- Played Matches -->
        <td>8</td>  <!-- Wins -->
        <td>1</td>  <!-- Draws -->
        <td>2</td>  <!-- Loses -->
        <td>14</td> <!-- Goals in favour -->
        <td>6</td>  <!-- Goals against -->
        <td>8</td>  <!-- Goals Difference -->
        <td><b>25</b></td>  <!-- Points -->
    </tr>
</table>

有人能帮我吗？我可以提供详细信息或尝试更好地解释任何事情，因为英语不是我的母语，我可能会出错。

您必须在HTML中提供id字段

例如，

将更改为

，您必须在HTML中提供一个id字段
例如，8
将更改为似乎您需要使用innerText
属性而不是值
：
function Won() {
    var cell = document.getElementById('n1');
    var currentValue = parseInt(cell.innerText);
    cell.innerText = currentValue + 1;
}

还要确保在HTML标记中有一个带有id=“n1”
的元素，因为现在它似乎丢失了：
<td id="n1">8</td>  <!-- Wins -->

8
似乎需要使用innerText
属性而不是值
：
function Won() {
    var cell = document.getElementById('n1');
    var currentValue = parseInt(cell.innerText);
    cell.innerText = currentValue + 1;
}

还要确保在HTML标记中有一个带有id=“n1”
的元素，因为现在它似乎丢失了：
<td id="n1">8</td>  <!-- Wins -->

8

function-Won（）{
var n1=parseFloat（document.getElementById（“赢得”）.textContent）；
document.getElementById（“赢得”）.textContent=n1+1；
}
函数绑定（）{
var n1=parseFloat（document.getElementById（“draw”）.textContent）；
document.getElementById（“draw”）.textContent=n1+1；
}
函数丢失（）{
var n1=parseFloat（document.getElementById（“loss”）.textContent）；
document.getElementById（“损失”）.textContent=n1+1；
}

团队
比赛
获胜
绘制
损失
赞成的目标
进球对抗
目标差异
要点
1.
马拉加
11
8.
1.
2.
14
6.
8.
25
赢了
捆绑
丢失
function-Won（）{
var n1=parseFloat（document.getElementById（“赢得”）.textContent）；
document.getElementById（“赢得”）.textContent=n1+1；
}
函数绑定（）{
var n1=parseFloat（document.getElementById（“draw”）.textContent）；
document.getElementById（“draw”）.textContent=n1+1；
}
函数丢失（）{
var n1=parseFloat（document.getElementById（“loss”）.textContent）；
document.getElementById（“损失”）.textContent=n1+1；
}

团队
比赛
获胜
绘制
损失
赞成的目标
进球对抗
目标差异
要点
1.
马拉加
11
8.
1.
2.
14
6.
8.
25
赢了
捆绑
丢失
您的尝试非常接近
但是有一件事，我在您提供的代码中没有看到任何带有id=“n1”
的元素。也许它在你的实际代码库中，但这里没有显示，所以我假设你的代码库中有一个
以下是工作代码，解释了您的错误操作和建议：

//这里我用一个主函数包装您的函数
//这样您就不必为类似的操作重复代码
函数Won（）{
返回AddScoreTo（'wins'）
}
函数绑定（）{
返回AddScoreTo（'draws'）
}
函数丢失（）{
返回AddScoreTo（'丢失'）
}
函数AddScoreTo（字段）{
//我正在把台阶一个一个地拆下来
//使之易于理解
//您可以按自己的方式优化它们
//通过id获取表格
var leagueTable=document.querySelector（“#league”）；
//按类名从表中获取目标单元格
var targetCell=leagueTable.querySelector（'.'+字段）；
//获取目标单元格内的内容
//.值仅用于输入元素
var值=parseInt（targetCell.textContent）；
//更改目标单元格的内容
targetCell.textContent=值+1；
}

1.
马拉加
11
8.
1.
2.
14
6.
8.
25
赢了
捆绑
丢失
您的尝试非常接近
但是有一件事，我在您提供的代码中没有看到任何带有id=“n1”
的元素。也许它在你的实际代码库中，但这里没有显示，所以我假设你的代码库中有一个
以下是工作代码，解释了您的错误操作和建议：

//这里我用一个主函数包装您的函数
//这样您就不必为类似的操作重复代码
函数Won（）{
返回AddScoreTo（'wins'）
}
函数绑定（）{
返回AddScoreTo（'draws'）
}
函数丢失（）{
返回AddScoreTo（'丢失'）
}
函数AddScoreTo（字段）{
//我正在把台阶一个一个地拆下来
//使之易于理解
//您可以按自己的方式优化它们
//通过id获取表格
var leagueTable=document.querySelector（“#league”）；
//按类名从表中获取目标单元格
var targetCell=leagueTable.querySelector（'.'+字段）；
//获取目标单元格内的内容
//.值仅用于输入元素
var值=parseInt（targetCell.textContent）；
//更改目标单元格的内容
targetCell.textContent=值+1；
}

1.
马拉加
11
8.
1.
2.
14
6.
8.
25
赢了
捆绑
Lost
您只需将id传递给对应的每一列即可动态更新该值
这是链接到

JS-Bin
1.
马拉加
11
8.
1.
2.
14
6.
8.
25
赢了
捆绑
迷路的
函数Won（）{
var n1=编号（document.getElementById（“n1”）.innerText）
n1=n1+1；
文件
<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <table width="60%" border="0" style="text-align:center;">
        <tr style="background:#01DF01;">
            <td>1</td>  <!-- Position -->
            <td align="left">&nbsp;&nbsp;&nbsp;<img src="img/teams/malaga.png" width="15" height="15">&nbsp; Malaga CF</td>
            <td id="n1">11</td> <!-- Played Matches -->
            <td>8</td>  <!-- Wins -->
            <td>1</td>  <!-- Draws -->
            <td>2</td>  <!-- Loses -->
            <td>14</td> <!-- Goals in favour -->
            <td>6</td>  <!-- Goals against -->
            <td>8</td>  <!-- Goals Difference -->
            <td><b>25</b></td>  <!-- Points -->
        </tr>
    </table>
    <button onclick="Won()">Won</button>
    <button onclick="Tied()">Tied</button>
    <button onclick="Lost()">Lost</button>
    </body>
    </html>
<script>
    function Won(){
          var n1= Number(document.getElementById("n1").innerText)
          n1 = n1 + 1;
          document.getElementById("n1").innerText =n1;
        }