如何将HTML表格B列与C列数值相乘后结果展示在D列

修复后可直接运行的完整代码 #

清理了原代码的语法错误，新增了自动计算逻辑，无需手动触发，所有价格加载完成后会自动填充D列的USD价值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hive Tip Tokens Current Value</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
    body {
      background: #fefefe;
      max-width: 750px;
      margin: 40px auto;
      padding: 0 22px;
      font: 18px/1.5 -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'Segoe UI', 'lucida grande', 'helvetica neue', helvetica, 'Fira Sans', roboto, noto, 'Droid Sans', cantarell, oxygen, ubuntu, 'franklin gothic medium', 'century gothic', 'Liberation Sans', sans-serif;
      color: #222;
    }
    html {
      font-size: medium;
    }
    body {
      background-color: #f6f6f6;
      color: #330;
      font-family: verdana, georgia, times, serif;
      max-width: 80em;
      padding: 0 1em;
      width: auto;
      font-size: 1rem;
      line-height: 1.4;
    }
    a {
      color: #1e6b8c;
      font-size: 1em;
      text-decoration: none;
      transition-delay: 0.1s;
      transition-duration: 0.3s;
      transition-property: color, background-color;
      transition-timing-function: linear;
    }
    a:visited {
      color: #6f32ad;
      font-size: 1em;
    }
    a:hover {
      background: #b6cff9;
      font-size: 1em;
      text-decoration: underline;
    }
    a:active {
      background-color: #427fed;
      color: white;
      font-size: 1em;
    }
    h1,h2,h3,h4,h5,h6 {
      color: #000;
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 1em;
      margin-top: 2em;
    }
    h1 {
      font-size: 2.2em;
      text-align: center;
    }
    h2 {
      font-size: 1.8em;
      border-bottom: solid 0.1rem #703820;
    }
    h3 {
      font-size: 1.5em;
    }
    h4 {
      font-size: 1.3em;
      text-decoration: underline;
    }
    h5 {
      font-size: 1.2em;
      font-style: italic;
    }
    h6 {
      font-size: 1.1em;
      margin-bottom: 0.5rem;
    }
    pre,code,xmp {
      font-family: courier;
      font-size: 1rem;
      line-height: 1.4;
      white-space: pre-wrap;
    }
    input[type=number] {
      width: 135px;
    }
    table th, table td {
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
  <a name="home_title"></a>
  <h1 id="H-E-tip-tokens"><strong>Hive-Engine </strong><span style="color: rgb(231, 2, 2)">tip tokens</span></h1>
  <p style="text-align:center">When you share or tip on H-E, here's how much the tip is worth:</p>
  <center>
    <table>
      <form name="hivetiptokensform">
        <tbody>
          <tr>
            <th>Token</th>
            <th>value of 1 token in HIVE</th>
            <th>Tip amount</th>
            <th>USD value of the tip</th>
          </tr>
          <tr>
            <td>ALIVE</td>
            <td><div id="ALIVEPrice">Loading last traded price...</div></td>
            <td data-amount="0.1">0.1 ALIVE</td>
            <td id="ALIVETotal"></td>
          </tr>
          <tr>
            <td>BBH</td>
            <td><div id="BBHPrice">Loading last traded price...</div></td>
            <td data-amount="1">1 BBH</td>
            <td id="BBHTotal"></td>
          </tr>
          <tr>
            <td>BEER</td>
            <td><div id="BEERPrice">Loading last traded price...</div></td>
            <td data-amount="0.1">0.1 BEER</td>
            <td id="BEERTotal"></td>
          </tr>
          <tr>
            <td>ENGAGE</td>
            <td><div id="ENGAGEPrice">Loading last traded price...</div></td>
            <td data-amount="10">10 ENGAGE*</td>
            <td id="ENGAGETotal"></td>
          </tr>
          <tr>
            <td>LUV</td>
            <td><div id="LUVPrice">Loading last traded price...</div></td>
            <td data-amount="1">1 LUV</td>
            <td id="LUVTotal"></td>
          </tr>
          <tr>
            <td>PIZZA</td>
            <td><div id="PIZZAPrice">Loading last traded price...</div></td>
            <td data-amount="0.1">0.1 PIZZA</td>
            <td id="PIZZATotal"></td>
          </tr>
          <tr>
            <td>WINEX</td>
            <td><div id="WINEXPrice">Loading last traded price...</div></td>
            <td data-amount="0.1">0.1 WINEX</td>
            <td id="WINEXTotal"></td>
          </tr>
        </tbody>
      </form>
    </table>
  </center>
  <small><small>*ENGAGE may not have a standard tip quantity, as far as I can tell. Instead, a quantity must be set by the tipper. From what I've seen, 10 ENGAGE is a normally tipped amount.</small></small>
  <p>
    <center>
      <div id="HIVEPrice">Loading last traded price in USD...</div>
      <span style="color:firebrick">value of 1 HIVE in USD</span>
    </center>
  <p>

  <script language="JavaScript">
    // 存储所有代币配置
    const tokens = ['ALIVE', 'BBH', 'BEER', 'ENGAGE', 'LUV', 'PIZZA', 'WINEX'];
    let hiveUsdPrice = null;
    let tokenPrices = {};

    // 计算所有行的USD价值
    function calculateAll() {
      if (!hiveUsdPrice || Object.keys(tokenPrices).length !== tokens.length) return;
      tokens.forEach(token => {
        const pricePerHive = parseFloat(tokenPrices[token]);
        const tipAmount = parseFloat(document.querySelector(`td[data-amount*=${token}]`).dataset.amount);
        const usdValue = pricePerHive * tipAmount * hiveUsdPrice;
        document.getElementById(`${token}Total`).textContent = usdValue.toFixed(4);
      });
    }

    // 获取HIVE对USD价格
    $.getJSON("https://min-api.cryptocompare.com/data/price?fsym=HIVE&tsyms=USD", function(data) {
      hiveUsdPrice = parseFloat(data["USD"]);
      $("#HIVEPrice").text(hiveUsdPrice.toFixed(2));
      calculateAll();
    }).fail(function(dat, textStatus, error) {
      var err = textStatus + ", " + error;
      alert(err);
    });

    // 批量获取代币价格
    tokens.forEach(token => {
      $.getJSON(`https://accounts.hive-engine.com/marketHistory?symbol=${token}`, function(data) {
        const price = parseFloat(data[0].closePrice);
        tokenPrices[token] = price;
        $(`#${token}Price`).text(price.toFixed(6));
        calculateAll();
      }).fail(function(dat, textStatus, error) {
        var err = textStatus + ", " + error;
        alert(err);
      });
    });
  </script>

  <p>
    <a href="javascript:document.location.reload();" ONMOUSEOVER="window.status='Refresh'; return true" ONMOUSEOUT="window.status='ahh...success'">
      <center><img src="images/refresh.png" width="85" border="0" /></center>
    </a>
  <p>
  <p>
    <center><small>Made with <img src="images/LUV.png" border="0" width="38"> by crrdlx</small></center>
</body>
</html>

主要修改点 #

• 修复了原HTML中多余的闭合标签错误，给C列小费金额增加data-amount属性方便直接读取数值，给D列增加唯一ID用于填充结果
• 修正了原代码中toFixed()方法调用位置错误的问题，代币价格保留6位小数提升计算精度
• 完全删除了原不适配的计算脚本，新增自动计算逻辑，所有价格加载完成后自动填充D列结果
• 优化了批量请求代币价格的逻辑，大幅减少冗余代码

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