Question

我继承了一个显示销售团队统计数据的html页面。我在这里插入了一个缩减版本

<html>
<head>
<title>test</title>
</head>

<body>
  <br>

  <div class="separator" style="clear: both; text-align: center;"></div><br>

  <div>
    <table border="2" cellpadding="10" cellspacing="0" style=
    "background-color: white; border-collapse: collapse; text-align: center; width: 900px;">
    <tbody>
        <tr style=
        "background-color: #f7941e; color: white; padding-bottom: 4px; padding-top: 5px;">
        <th>
            <div style="text-align: center;">
              <span style=
              "font-family: Verdana, sans-serif; font-size: small;">Total
              Accounts</span>
            </div>
          </th>

        </tr>

        <tr>
          <td>
            <div style="text-align: justify;">
              <div style="text-align: center;">
                <span style=
                "color: #20124d; font-family: Verdana, sans-serif; font-size: 75px; font-weight: bold;">
                200</span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

如果你看，你可以看到销售数字目前是200.现在让我们说，然后必须将它改为“300”。

他们使用的系统不显示他们可以编辑的表的预览，因此他们通过搜索代码直接编辑html。我想做的是在javascript中列出页面顶部的变量，并让人们在那里编辑它们，而不是通过代码搜索。

类似

<html>
<head>
<script>

myVar = "300";
document.getElementById('total_accounts').innerHTML = myVar;
</script>


<title>test</title>
</head>

<body>
  <br>

  <div class="separator" style="clear: both; text-align: center;"></div><br>

  <div>
    <table border="2" cellpadding="10" cellspacing="0" style=
    "background-color: white; border-collapse: collapse; text-align: center; width: 900px;">
    <tbody>
        <tr style=
        "background-color: #f7941e; color: white; padding-bottom: 4px; padding-top: 5px;">
        <th>
            <div style="text-align: center;">
              <span style=
              "font-family: Verdana, sans-serif; font-size: small;">Total
              Accounts</span>
            </div>
          </th>

        </tr>

        <tr>
          <td>
            <div style="text-align: justify;">
              <div style="text-align: center;">
                <span id="total_accounts" style=
                "color: #20124d; font-family: Verdana, sans-serif; font-size: 75px; font-weight: bold;"></span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

这样我就可以列出页面顶部的所有变量。不幸的是，它不起作用，它在单元格中没有显示任何值。我哪里出错？

感谢

Answer 1

假设您不使用jQuery，那么您的脚本应为：

window.onload = function(){
myVar = "300";
document.getElementById('total_accounts').innerHTML = myVar;
        };

您可以在此查看其工作原理：Example

Answer 2

window.load是一个选项，你甚至可以从body标签调用一个函数，如下所示

<script>  
function changeAccount(){
  var myVar = "300";
  document.getElementById('total_accounts').innerHTML = myVar;
}
</script>

<title>test</title>
</head>

<body onload="changeAccount()">

在页面加载时使用innerhtml将变量插入到html页面中

2 个答案: