javascript - 计算表数量和乘法

标签 javascript html jquery calculation

Table_exaple 你好，

我需要一些帮助。

我的问题是我不知道如何做到这一点。我的简单项目的重点是创建一个仅包含输入文本框的表，其中仅添加整数，并且我只需要对列求和。

作为数量总和，我的意思是计算整个列，通过计算总和，我需要计算标题的数量 * 值。

例如:第 5$ 列的数量为 50，因此计算出的单元格必须为 250$。

我还想添加一个动态添加列的按钮，并且标题是自定义的...因此标题值也应该保存为变量。

我尝试使用 jQuery 进行一些操作，但它不相关，因为我希望无论我在标题中输入什么输入，都可以动态计算它。

这是我对每一列的糟糕 jQuery，它可以工作，但这不是目标。

$(document).ready(function() {
  $(".txt").each(function() {
    $(this).keyup(function() {
      calculateSum();
    });
  });
});

function calculateSum() {
  var sum = 0;
  $(".txt").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum").html(sum);
  $("#calc").html(sum);
}

$(document).ready(function() {
  $(".txt1").each(function() {
    $(this).keyup(function() {
      calculateSum1();
    });
  });
});

function calculateSum1() {
  var sum = 0;
  $(".txt1").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum1").html(sum);
  $("#calc1").html(sum *= 2);
}

$(document).ready(function() {
  $(".txt2").each(function() {
    $(this).keyup(function() {
      calculateSum2();
    });
  });
});

function calculateSum2() {
  var sum = 0;
  $(".txt2").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum2").html(sum);
  $("#calc2").html(sum *= 3);
}

$(document).ready(function() {
  $(".txt3").each(function() {
    $(this).keyup(function() {
      calculateSum3();
    });
  });
});

function calculateSum3() {
  var sum = 0;
  $(".txt3").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum3").html(sum);
  $("#calc3").html(sum *= 5);
}

$(document).ready(function() {
  $(".txt4").each(function() {
    $(this).keyup(function() {
      calculateSum4();
    });
  });
});

function calculateSum4() {
  var sum = 0;
  $(".txt4").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum4").html(sum);
  $("#calc4").html(sum *= 10);
}

$(document).ready(function() {
  $(".txt5").each(function() {
    $(this).keyup(function() {
      calculateSum5();
    });
  });
});

function calculateSum5() {
  var sum = 0;
  $(".txt5").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });
  $("#sum5").html(sum);
  $("#calc5").html(sum *= 20);
}
.tftable {
  font-size: 12px;
  color: #333333;
  width: 70%;
  margin-right: 15%;
  margin-left: 15%;
  border-width: 1px;
  border-color: #a9a9a9;
  border-collapse: collapse;
}

.tftable th {
  font-size: 12px;
  background-color: #6382c59a;
  border-width: 1px;
  padding: 18px;
  border-style: solid;
  border-color: #474747;
  text-align: left;
}

.tftable tr {
  background-color: #ffffff;
}

.tftable td {
  font-size: 12px;
  border-width: 2px;
  padding: 5px;
  border-style: solid;
  border-color: #a9a9a9;
}

.tftable td:nth-child(2n+2) {
  background: #CCC;
}

.tftable tr td input {
  height: 100%;
  background: none;
}

.tftable tr th {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.tftable tr td {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 15rem;
}

.tftable tr td input {
  border: none;
  text-align: center;
  padding: 0.7rem;
  width: 78%;
}

.button {
  padding: 7px 15px;
  text-align: center;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #3e8e41;
}

.button:active {
  background-color: #3e8e41;
  transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table id="tbl" class="tftable" border="1">
  <tr>
    <button class="button" onclick="addColumn()">Add Column</button>
    <th>Types</th>
    <th>1 $</th>
    <th>2 $</th>
    <th>3 $</th>
    <th>5 $</th>
    <th>10 $</th>
    <th>20 $</th>
  </tr>

  <tr>
    <td>Type 1</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 2</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 3</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 4</td>
    <td><input type="text" class="txt" name="txt" id="1"></td>
    <td><input type="text" class="txt1" name="txt" id="2"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 5</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 6</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 7</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 8</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 9</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr>
    <td>Type 10</td>
    <td><input type="text" class="txt" name="txt"></td>
    <td><input type="text" class="txt1" name="txt"></td>
    <td><input type="text" class="txt2" name="txt"></td>
    <td><input type="text" class="txt3" name="txt"></td>
    <td><input type="text" class="txt4" name="txt"></td>
    <td><input type="text" class="txt5" name="txt"></td>
  </tr>
  <tr style="border-top: 5px solid black">
    <td>Quantity</td>
    <td><span id="sum"></span></td>
    <td><span id="sum1"></span></td>
    <td><span id="sum2"></span></td>
    <td><span id="sum3"></span></td>
    <td><span id="sum4"></span></td>
    <td><span id="sum5"></span></td>
  </tr>
  
    <td>Calculated</td>
    <td><span id="calc"></span></td>
    <td><span id="calc1"></span></td>
    <td><span id="calc2"></span></td>
    <td><span id="calc3"></span></td>
    <td><span id="calc4"></span></td>
    <td><span id="calc5"></span></td>
  </tr>
</table>

最佳答案

您希望遵循的模式称为“不要重复自己”或“DRY”。它的核心原则是创建可重用的通用结构，其中不包含标识符，而仅包含处理所需的任何元数据。

在这种情况下，您可以为所有 input 元素提供通用类名，而不是增量类名或 id。然后在 JS 中，您可以使用 index() 确定用户正在与哪一列进行交互。从那里，您可以使用 map() 构建该列中所有值的数组并对它们求和。最后，您可以将列价格存储在标题上的 data 属性中，并将数量乘以该数字即可得出计算出的总计。

实际上，它看起来像下面这样。请注意，此 JS 将适用于无限数量的行和列，它所依赖的只是第 th 上的 data 属性，以便提供单价。

jQuery($ => {
  $('.add-column').on('click', e => {
    console.log('addColumn() logic here...');
  });

  let $table = $('#tbl');

  $('.txt').on('input', e => {
    let tdIndex = $(e.target).closest('td').index();
    let colQuantities = $table.find(`tbody td:nth-child(${tdIndex + 1})`).map((i, td) => parseFloat($(td).find('input').val()) || null).get();
    let colSum = colQuantities.reduce((acc, cur) => acc + cur, 0);
    let colPrice = $table.find(`thead th:nth-child(${tdIndex + 1})`).data('price');

    $table.find(`tbody td:nth-child(${tdIndex + 1}) .sum`).text(colSum);
    $table.find(`tbody td:nth-child(${tdIndex + 1}) .calc`).text((colSum * colPrice).toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD'
    }));
  });
});
input {
  width: 50px;
}

.quantity-row {
  border-top: 5px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button add-column">Add Column</button>

<table id="tbl" class="tftable" border="1">
  <thead>
    <tr>
      <th>Types</th>
      <th data-price="1">1 $</th>
      <th data-price="2">2 $</th>
      <th data-price="3">3 $</th>
      <th data-price="5">5 $</th>
      <th data-price="10">10 $</th>
      <th data-price="20">20 $</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Type 1</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 2</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 3</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 4</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 5</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 6</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 7</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 8</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 9</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr>
      <td>Type 10</td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
      <td><input type="text" class="txt" name="txt"></td>
    </tr>
    <tr class="quantity-row">
      <td>Quantity</td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
      <td><span class="sum"></span></td>
    </tr>
    <tr>
      <td>Calculated</td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
      <td><span class="calc"></span></td>
    </tr>
  </tbody>
</table>

这里需要注意的其他重要部分是，您不需要为每个代码块重复 document.ready 处理程序，您可以将依赖于它的所有逻辑放在单个处理程序中。

此外，您不应使用 onclick 或其他 onX 属性，因为它们已经过时且不再是良好做法。请改用不显眼的事件处理程序，如上面的示例所示。

关于javascript - 计算表数量和乘法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67885132/

上一篇：python - 在 pandas 数据帧的字典行中创建元素计数的新列

下一篇：recaptcha - 具有图像选择挑战的企业 reCaptcha

相关文章：

javascript - 试图用 Javascript 理解这段代码

javascript - 将 cookie 设置为 iframe src

javascript - 像 BBC iPlayer 一样在 iPad 上自动播放 HTML5 视频？

javascript/jquery::获取文本值？

php - 是否有可能以某种方式为我的网站获取这个随机生成的 key 并访问 SQL？

javascript - 在动态 div 中追加动态段落

javascript - 元素类型 "myelement"必须后跟属性规范 ">"或 "/>

javascript - IE 不从 php 脚本播放 mp3

javascript - 尝试用 jQuery 制作一个简单的网格

html - CSS，knockout.js : how to dynamically assign id to checkbox with foreach data-bind

©2024 IT工具网  联系我们