javascript - 如何获得添加单元格的总和-6ren

javascript - 如何获得添加单元格的总和

转载作者：行者123 更新时间：2023-11-28 00:43:00

我需要一些帮助来获取附加单元格值的总和，这是我的代码:

var i = 0;
var ii = 0;
var iii = 0;
var iiii = 0;

function buttonClick1() {
  i++;
  document.getElementById("qty1").value = i;
}

function decreClick1(){
  if(i <= 0)
  return;
  i--;
  document.getElementById("qty1").value = i;
}

function buttonClick2() {
  ii++;
  document.getElementById("qty2").value = ii;
}

function decreClick2(){
  if(ii <= 0)
  return;
  ii--;
  document.getElementById("qty2").value = ii;
}

function buttonClick3() {
  iii++;
  document.getElementById("qty3").value = iii;
}

function decreClick3(){
  if(iii <= 0)
  return;
  iii--;
  document.getElementById("qty3").value = iii;
}

function buttonClick4() {
  iiii++;
  document.getElementById("qty4").value = iiii;
}

function decreClick4(){
  if(iiii <= 0)
    return;
  iiii--;
  document.getElementById("qty4").value = iiii;
}

var price1 = 14;
var price2 = 24;
var price3 = 34;
var price4 = 44;
var item1 = "apple";
var item2 = "boy";
var item3 = "cat";
var item4 = "dog";

function a(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId1'
  cel1.innerHTML = item1;
  cel2.innerHTML = document.getElementById("qty1").value;
  cel3.innerHTML = "PHP"+price1*i;
}

function b(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId2'
  cel1.innerHTML = item2;
  cel2.innerHTML = document.getElementById("qty2").value;
  cel3.innerHTML = "PHP"+price2*ii;
}

function c(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId3'
  cel1.innerHTML = item3;
  cel2.innerHTML = document.getElementById("qty3").value;
  cel3.innerHTML = "PHP"+price3*iii;
}

function d(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId4'
  cel1.innerHTML = item4;
  cel2.innerHTML = document.getElementById("qty4").value;
  cel3.innerHTML = "PHP"+price4*iiii;
}

input{
  width: 40px;
  height: 25px;
  text-align: center;
}

<p>Apple</p>
<p>PHP<s> 24 </s> PHP 14</p>
<button type="button" onclick="decreClick1()">-</button>
<input type="text" name="quantity" value="0" id="qty1" />
<button type="button" onclick="buttonClick1()">+</button>
<br><br>
<button type="button" onclick="a()">Add to cart</button>

<p>Boy</p>
<p>PHP<s> 34 </s> PHP 24</p>
<button type="button" onclick="decreClick2()">-</button>
<input type="text" name="quantity" value="0" id="qty2" />
<button type="button" onclick="buttonClick2()">+</button>
<br><br>
<button type="button" onclick="b()">Add to cart</button>

<p>Cat</p>
<p>PHP<s> 44 </s> PHP 34</p>
<button type="button" onclick="decreClick3()">-</button>
<input type="text" name="quantity" value="0" id="qty3" />
<button type="button" onclick="buttonClick3()">+</button>
<br><br>
<button type="button" onclick="c()">Add to cart</button>


<p>Dog</p>
<p>PHP<s> 54 </s> PHP 44</p>
<button type="button" onclick="decreClick4()">-</button>
<input type="text" name="quantity" value="0" id="qty4" />
<button type="button" onclick="buttonClick4()">+</button>
<br><br>
<button type="button" onclick="d()">Add to cart</button>


<table style="width:50%" border="1" id="table1">
  <caption><b>Cart List:<b></caption>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><b>Total:</b></td>
    <td id="total"></td>
  </tr>
</table>

这里的问题是，当我输入一个数量并单击它转到表格的按钮时，我无法获得我使用的添加单元格的总和 tot = document.getElementById("total").innerHTML = celid1+celid2+celid3+celid4;

最佳答案

快速回答:

  const val = parseInt(document.getElementById("qty3").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }

我应该说你的代码太大了。您应该使用函数、值数组和循环。

var i = 0;
var ii = 0;
var iii = 0;
var iiii = 0;

function buttonClick1() {
  i++;
  document.getElementById("qty1").value = i;
}

function decreClick1() {
  if (i <= 0)
    return;
  i--;
  document.getElementById("qty1").value = i;
}

function buttonClick2() {
  ii++;
  document.getElementById("qty2").value = ii;
}

function decreClick2() {
  if (ii <= 0)
    return;
  ii--;
  document.getElementById("qty2").value = ii;
}

function buttonClick3() {
  iii++;
  document.getElementById("qty3").value = iii;
}

function decreClick3() {
  if (iii <= 0)
    return;
  iii--;
  document.getElementById("qty3").value = iii;
}

function buttonClick4() {
  iiii++;
  document.getElementById("qty4").value = iiii;
}

function decreClick4() {
  if (iiii <= 0)
    return;
  iiii--;
  document.getElementById("qty4").value = iiii;
}

var price1 = 14;
var price2 = 24;
var price3 = 34;
var price4 = 44;
var item1 = "apple";
var item2 = "boy";
var item3 = "cat";
var item4 = "dog";


function a() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId1'
  cel1.innerHTML = item1;
  cel2.innerHTML = document.getElementById("qty1").value;
  cel3.innerHTML = "PHP" + price1 * i;

  const val = parseInt(document.getElementById("qty1").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function b() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId2'
  cel1.innerHTML = item2;
  cel2.innerHTML = document.getElementById("qty2").value;
  cel3.innerHTML = "PHP" + price2 * ii;

  const val = parseInt(document.getElementById("qty2").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function c() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId3'
  cel1.innerHTML = item3;
  cel2.innerHTML = document.getElementById("qty3").value;
  cel3.innerHTML = "PHP" + price3 * iii;

  const val = parseInt(document.getElementById("qty3").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function d() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId4'
  cel1.innerHTML = item4;
  cel2.innerHTML = document.getElementById("qty4").value;
  cel3.innerHTML = "PHP" + price4 * iiii;

  const val = parseInt(document.getElementById("qty4").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }

}

input {
  width: 40px;
  height: 25px;
  text-align: center;
}

<html>

<body>
  <p>Apple</p>
  <p>PHP<s> 24 </s> PHP 14</p>
  <button type="button" onclick="decreClick1()">-</button>
  <input type="text" name="quantity" value="0" id="qty1" />
  <button type="button" onclick="buttonClick1()">+</button>
  <br><br>
  <button type="button" onclick="a()">Add to cart</button>

  <p>Boy</p>
  <p>PHP<s> 34 </s> PHP 24</p>
  <button type="button" onclick="decreClick2()">-</button>
  <input type="text" name="quantity" value="0" id="qty2" />
  <button type="button" onclick="buttonClick2()">+</button>
  <br><br>
  <button type="button" onclick="b()">Add to cart</button>

  <p>Cat</p>
  <p>PHP<s> 44 </s> PHP 34</p>
  <button type="button" onclick="decreClick3()">-</button>
  <input type="text" name="quantity" value="0" id="qty3" />
  <button type="button" onclick="buttonClick3()">+</button>
  <br><br>
  <button type="button" onclick="c()">Add to cart</button>


  <p>Dog</p>
  <p>PHP<s> 54 </s> PHP 44</p>
  <button type="button" onclick="decreClick4()">-</button>
  <input type="text" name="quantity" value="0" id="qty4" />
  <button type="button" onclick="buttonClick4()">+</button>
  <br><br>
  <button type="button" onclick="d()">Add to cart</button>


  <table style="width:50%" border="1" id="table1">
    <caption><b>Cart List:<b></caption>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><b>Total:</b></td>
      <td id="total"></td>
      </tr>
  </table>

</body>

</html>

关于javascript - 如何获得添加单元格的总和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52309084/

文章推荐： javascript - 在解析中检索信息

文章推荐： php - 自定义 wordpress 主题，图片不显示？

文章推荐： html - 单击另一个 div 时显示无父 div，纯 css 可能吗？

python - 获得 Mechanize 和斜纹布说话
我正在为我的雇主编写脚本，以从他们自己的站点获取某些数据。出于一长串原因，我需要从网站上获取数据，如图所示。我发现，其中一些数据是通过 js 调用检索的... 回想起来，我应该选择 Mechanize
cryptography - 获得 ECDSA 签名的固定长度字节表示的正确方法是什么？
我正在使用 python 和 cryptography.io 来签署和验证消息。我可以通过以下方式获得签名的 DER 编码字节表示: cryptography_priv_key.sign(messag
licensing - 获得 GPLv2 许可的库能否用于专有应用程序？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
r - 获得 ECDF 的导数
是否可以区分 ECDF？以下面得到的为例。 set.seed(1) a <- sort(rnorm(100)) b <- ecdf(a) plot(b) 我想对 b 求导以获得它的概率密度函数 (PD
Javascript 获得 MIME 类型支持
我找到了如何从 navigator.mimeTypes 获取 mimetypes: function GetMimeTypes() { var message = ""; var mi
Javascript 添加的表单元素无法通过 $_POST 获得
我在表单中使用单选按钮来隐藏/显示联系人表单中的成员 ID 字段。问题是，当 javascript 更改 html 中包含的隐藏 id 字段(该字段设置为“无”值)时，该字段将不再通过 post 可用
c++ - 如何从snprintf()获得-1
我正在做单元测试。我必须测试所有可能的if..else情况。但是在此if语句中: int32_t i32Res = snprintf(buffer, len, "The%d_String_%d", 0
facebook - 获得 Facebook 应用页面的总点赞数
我有一个 Facebook 应用程序，我想从中获取“喜欢”的总数。我想知道这是否可能。其中 ID 是应用程序的 ID，ACCESS_TOKEN 是我尝试过的应用程序的当前访问 token : gra
azure - 获得 blob 的多个租约
如果我有多个计算实例尝试同时获取同一个 blob 的租约，则似乎经常会成功。我的印象是，一旦租约发出(并因此被客户获得)，就不可能同时发出另一个租约？我希望情况确实如此，我一直在 Azure 中使用
elasticsearch - elasticsearch-获得 'function_score'内的中级分数
这是我的索引 POST /blogs/1 { "name" : "learn java", "popularity" : 100 } POST /blogs/2 { "name" : "l
symfony - 获得 Symfony2 中的最高用户角色
我正在将 Symfony2 与 FOSUserBundle 一起使用。我需要为用户获得最高角色。 role_hierarchy: ROLE_CONTRIBUTOR: ROLE_USER
java - 获得 REST 请求的快速响应
我正在向服务器发送基于 REST 的请求。我希望尽快得到答复，并希望了解可以进行的各种优化。一种方法当然是在线程中并行发送这些请求。还有哪些其他选项可用于优化此功能？在服务器上，可以添加哪些配置？
java - 获得 HEAD 之上的提交
这可能是某种重复的问题，但我似乎找不到合适的解决方案。我正在使用 git4idea.history.GitHistoryUtils.history() 获取提交列表。如果 checkout 其中一个较
c - 获得 centavos 或小数点后两位的公式是什么？
我正在做一个程序，可以输入每周的工资和那一周的总工作时间。它应该以小时工资率显示答案。但是我无法显示正确的“centavos/2 decimal places”公式并且它不想使用 float % fl
c - 获得 2 的幂相关结果的优雅方法
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
android - 获得 Looper 的最佳做法是什么？
我已经尝试了 mContext.getMainLooper() 和 Looper.getMainLooper()。两者都返回相同的结果，但我想知道哪种方法正确？我还从 Android 开发人员链接中
mySQL 获得 n 级附属机构
我有一个“affiliates”表，其中包含“user”和“referredBy”列。给定一个用户，我希望获得该用户推荐的所有“n 级”玩家。对于 n=1，我们只关心您直接推荐的玩家数量: SELE
sql - 获得 10 个不同的项目以及相关任务的最新更新
我在 PostgreSQL 9.5 数据库中有两个表: project - id - name task - id - project_id - name - updated_
PHP Iplode 获得 IN 查询的预期结果
请帮助我怎样才能得到我预期的结果，在此先感谢并抱歉我的英语不好。 PHP: $dog = implode(',', $data['dogbreed']); $query .= "AND `do
ios - 获得 CGVector 的负数
我有 let impulse = CGVectorMake(CGFloat(Constants.impulse), 0) 如何在不创建另一个 CGVector 的情况下得到它的负值？我正在考虑在 C

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何获得添加单元格的总和