时间戳

首页 > 解决方案 > 如何将 B 列乘以 C 列并在 D 列中显示结果？

javascript - 如何将 B 列乘以 C 列并在 D 列中显示结果？

问题描述

我有一个四列的简单表格。B 列的数据通过 json 导入。我只是希望将两者相乘并将它们呈现在 D 列中。

如何将 B 列中的值乘以 C 列中的值并将其呈现在 D 列中？

工作版本目前处于http://crrdlx.websavvy.work/hivetiptokens/并在 B 列中显示实时数据。（下图）

仅供参考，注释“HE 提示令牌计算”部分中的一些代码（下面的代码）来自我使用的另一个脚本，不适用于此处。

http://crrdlx.websavvy.work/hivetiptokens

body {
  background: #fefefe;
  max-width: 750px;
  margin: 40px auto;
  padding: 0 22px;
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, /* MacOS and iOS */
  'avenir next', avenir, /* MacOS and iOS */
  'Segoe UI', /* Windows */
  'lucida grande', /* Older MacOS */
  'helvetica neue', helvetica, /* Older MacOS */
  'Fira Sans', /* Firefox OS */
  roboto, noto, /* Google stuff */
  'Droid Sans', /* Old Google stuff */
  cantarell, oxygen, ubuntu, /* Linux stuff */
  'franklin gothic medium', 'century gothic', /* Windows stuff */
  'Liberation Sans', /* Linux */
  sans-serif;
  /* Everything else */
  ;
  color: #222;
}

html {
  font-size: medium;
}

body {
  background-color: #f6f6f6;
  color: #330;
  font-family: verdana, georgia, times, serif;
  margin: ;
  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: #fffff6;
  color: white;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #black;
  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;
}
<!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>
</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>0.1 ALIVE</td>
            <td></td>
          </tr>
          <tr>
            <td>BBH</td>
            <td>
              <div id="BBHPrice" />Loading last traded price...</div>
            </td>
            <td>1 BBH</td>
            <td></td>
          </tr>
          <tr>
            <td>BEER</td>
            <td>
              <div id="BEERPrice" />Loading last traded price...</div>
            </td>
            <td>0.1 BEER</td>
            <td></td>
          </tr>
          <tr>
            <td>ENGAGE</td>
            <td>
              <div id="ENGAGEPrice" />Loading last traded price...</div>
            </td>
            <td>10 ENGAGE*</td>
            </td>
            </td>
          </tr>
          <tr>
            <td>LUV</td>
            <td>
              <div id="LUVPrice" />Loading last traded price...</div>
            </td>
            <td>1 LUV</td>
            </td>
            </td>
          </tr>
          <tr>
            <td>PIZZA</td>
            <td>
              <div id="PIZZAPrice" />Loading last traded price...</div>
            </td>
            <td>0.1 PIZZA</td>
            </td>
            <td>
          </tr>
          <tr>
            <td>WINEX</td>
            <td>
              <div id="WINEXPrice" />Loading last traded price...</div>
            </td>
            <td>0.1 WINEX</td>
            <td></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>
      <p>
    </center>
    <p>


      <!-- Fetch HIVE price in USD -->
      <script language="JavaScript">
        $.getJSON("https://min-api.cryptocompare.com/data/price?fsym=HIVE&tsyms=USD", function(data) {
          $("#HIVEPrice").text(data["USD"].toFixed(2));
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });
      </script>
      <!-- End HIVE price fetch -->


      <!-- Fetch Hive Engine token prices -->
      <script language="JavaScript">
        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=ALIVE", function(data) {
          $("#ALIVEPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });

        var CurrentPrice = document.getElementById('ALIVEPrice');
        CurrentPrice.innerHTML = ALIVEPrice.innerHTML;

        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=BBH", function(data) {
          $("#BBHPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });



        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=BEER", function(data) {
          $("#BEERPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });



        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=ENGAGE", function(data) {
          $("#ENGAGEPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });



        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=LUV", function(data) {
          $("#LUVPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });



        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=PIZZA", function(data) {
          $("#PIZZAPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });



        $.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=WINEX", function(data) {
          $("#WINEXPrice").text(data[0].closePrice).toFixed(2);
        }).fail(function(dat, textStatus, error) {
          var err = textStatus + ", " + error;
          alert(err);
        });
      </script>
      <!-- End Hive Engine token price and conversion engine -->



      <!-- HE tip token calculations-->
      <script language="JavaScript">
        function ALIVEconvert() {
          with(document.hivetiptokensform) {
            ALIVEConvert.value = (ALIVEtoken.value * CurrentPrice.innerHTML);
          }
        }

        function LiveConvert() {
          with(document.hivetiptokensform) {
            LiveConvert.value = (CurrentPrice.innerHTML);
          }
        }

        function USDConvert() {
          with(document.hivetiptokensform) {
            LiveConvert.value = (HEtoken.value * CurrentPrice.innerHTML * USDCurrentPrice.innerHTML);
          }
        }

        function hivevalueonehetoken() {
          with(document.hivetiptokensform) {
            hivevalueonehetoken.value = (CurrentPrice.innerHTML);
          }
        }

        function usdvalueonehetoken() {
          with(document.hivetiptokensform) {
            usdvalueonehetoken.value = (CurrentPrice.innerHTML * USDCurrentPrice.innerHTML);
          }
        }
      </script>
      <!-- End HE Tip Token calculations -->





      <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" height="" border="0" /></a>
        </center>
        <p>


          <p>
            <center><small>Made with <a href="https://peakd.com/@luvshares/about" target="_blank"><img src="images/LUV.png" border="0" width="38"></a> by <a href="https://peakd.com/@crrdlx/about" target="_blank">crrdlx</a></small></center>


            <!-- Default Statcounter code -->

            <!-- End of Statcounter Code -->
</body>

</html>

标签： javascripthtml

解决方案

  • 我更正了无效的 HTML（结束标记和表格 tbody/thead）

  • 我给你做了一个辅助函数。你的一切.text(data[0].closePrice).toFixed(2)都不正确

  • 然后我将 div 传递给计算

const toFix = str => (+str).toFixed(6); // perhaps you should do 6 instead?
const calc = $div => {
  const $row = $div.closest("tr")
  const $cells = $row.find("td");
  const qty = +$cells.eq(2).text().split(" ")[0];
  const val = $div.text()
  // console.log($div.attr("id"),val, qty, val * qty)
  const res = val * qty
  $cells.eq(3).text(isNaN(res) ? "" : res.toFixed(3)); // or (2) but then several will show 0.00

};
<!-- Fetch HIVE price in USD -->
$.getJSON("https://min-api.cryptocompare.com/data/price?fsym=HIVE&tsyms=USD", function(data) {
  $("#HIVEPrice").text(toFix(data["USD"]));
  calc($("#HIVEPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});
<!-- End HIVE price fetch -->


<!-- Fetch Hive Engine token prices -->
$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=ALIVE", function(data) {
  $("#ALIVEPrice").text(toFix(data[0].closePrice));
  calc($("#ALIVEPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});

var CurrentPrice = document.getElementById('ALIVEPrice');
CurrentPrice.innerHTML = ALIVEPrice.innerHTML;

$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=BBH", function(data) {
  $("#BBHPrice").text(toFix(data[0].closePrice));
  calc($("#BBHPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});



$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=BEER", function(data) {
  $("#BEERPrice").text(toFix(data[0].closePrice));
  calc($("#BEERPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});



$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=ENGAGE", function(data) {
  $("#ENGAGEPrice").text(toFix(data[0].closePrice));
  calc($("#ENGAGEPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});



$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=LUV", function(data) {
  $("#LUVPrice").text(toFix(data[0].closePrice));
  calc($("#LUVPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});



$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=PIZZA", function(data) {
  $("#PIZZAPrice").text(toFix(data[0].closePrice));
  calc($("#PIZZAPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});



$.getJSON("https://accounts.hive-engine.com/marketHistory?symbol=WINEX", function(data) {
  $("#WINEXPrice").text(toFix(data[0].closePrice));
  calc($("#WINEXPrice"));
}).fail(function(dat, textStatus, error) {
  var err = textStatus + ", " + error;
  alert(err);
});

<!-- End Hive Engine token price and conversion engine -->



<!-- HE tip token calculations-->
function ALIVEconvert() {
  with(document.hivetiptokensform) {
    ALIVEConvert.value = (ALIVEtoken.value * CurrentPrice.innerHTML);
  }
}

function LiveConvert() {
  with(document.hivetiptokensform) {
    LiveConvert.value = (CurrentPrice.innerHTML);
  }
}

function USDConvert() {
  with(document.hivetiptokensform) {
    LiveConvert.value = (HEtoken.value * CurrentPrice.innerHTML * USDCurrentPrice.innerHTML);
  }
}

function hivevalueonehetoken() {
  with(document.hivetiptokensform) {
    hivevalueonehetoken.value = (CurrentPrice.innerHTML);
  }
}

function usdvalueonehetoken() {
  with(document.hivetiptokensform) {
    usdvalueonehetoken.value = (CurrentPrice.innerHTML * USDCurrentPrice.innerHTML);
  }
}

<!-- End HE Tip Token calculations -->
body {
  background: #fefefe;
  max-width: 750px;
  margin: 40px auto;
  padding: 0 22px;
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, /* MacOS and iOS */
  'avenir next', avenir, /* MacOS and iOS */
  'Segoe UI', /* Windows */
  'lucida grande', /* Older MacOS */
  'helvetica neue', helvetica, /* Older MacOS */
  'Fira Sans', /* Firefox OS */
  roboto, noto, /* Google stuff */
  'Droid Sans', /* Old Google stuff */
  cantarell, oxygen, ubuntu, /* Linux stuff */
  'franklin gothic medium', 'century gothic', /* Windows stuff */
  'Liberation Sans', /* Linux */
  sans-serif;
  /* Everything else */
  ;
  color: #222;
}

html {
  font-size: medium;
}

body {
  background-color: #f6f6f6;
  color: #330;
  font-family: verdana, georgia, times, serif;
  margin: ;
  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: #fffff6;
  color: white;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #black;
  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;
}
<!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>
</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>
    <form name="hivetiptokensform">
      <table id="calcTable">
        <thead>
          <tr>
            <th>Token</th>
            <th>value of 1 token in HIVE</th>
            <th>Tip amount</th>
            <th>USD value of the tip</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>ALIVE</td>
            <td>
              <div id="ALIVEPrice">Loading last traded price...</div>
            </td>
            <td>0.1 ALIVE</td>
            <td></td>
          </tr>
          <tr>
            <td>BBH</td>
            <td>
              <div id="BBHPrice">Loading last traded price...</div>
            </td>
            <td>1 BBH</td>
            <td></td>
          </tr>
          <tr>
            <td>BEER</td>
            <td>
              <div id="BEERPrice">Loading last traded price...</div>
            </td>
            <td>0.1 BEER</td>
            <td></td>
          </tr>
          <tr>
            <td>ENGAGE</td>
            <td>
              <div id="ENGAGEPrice">Loading last traded price...</div>
            </td>
            <td>10 ENGAGE*</td>
            <td></td>
          </tr>
          <tr>
            <td>LUV</td>
            <td>
              <div id="LUVPrice">Loading last traded price...</div>
            </td>
            <td>1 LUV</td>
            <td></td>
          </tr>
          <tr>
            <td>PIZZA</td>
            <td>
              <div id="PIZZAPrice">Loading last traded price...</div>
            </td>
            <td>0.1 PIZZA</td>
            <td>
              <td>
          </tr>
          <tr>
            <td>WINEX</td>
            <td>
              <div id="WINEXPrice">Loading last traded price...</div>
            </td>
            <td>0.1 WINEX</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </form>

  </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>
      <p>
    </center>
    <p>





      <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" height="" border="0" /></a>
        </center>
        <p>


          <p>
            <center><small>Made with <a href="https://peakd.com/@luvshares/about" target="_blank"><img src="images/LUV.png" border="0" width="38"></a> by <a href="https://peakd.com/@crrdlx/about" target="_blank">crrdlx</a></small></center>


            <!-- Default Statcounter code -->

            <!-- End of Statcounter Code -->
</body>

</html>

推荐阅读