【问题标题】：Calculating table quantity and multiplication计算表格数量和乘法
【发布时间】：2021-06-08 09:38:28
【问题描述】：

我需要一些帮助。

我的问题是我不知道该怎么做。我这个简单项目的重点是创建一个只有输入文本框的表格，其中只添加整数，我只需要对列求和。

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

例如：第 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>

【问题讨论】：

请将相关的 HTML 和 CSS 添加到问题中，以便我们查看问题的工作示例。
您的代码也可以变得更加简单。就像您不需要为每段代码准备好文档一样
这看起来像是一堂编程课。与其让别人帮你解决，不如通读文档并得出自己的结论。例如，您当然可以提供 tds 类来查找每列的单元格。

标签： javascript html jquery calculation

【解决方案1】：

您希望遵循的模式称为“不要重复自己”，或 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 属性，因为它们已过时且不再是好的做法。如上例所示，请改用不显眼的事件处理程序。

【讨论】：

太棒了，谢谢，但是当我添加新列时，let tdIndex = $(e.target).closest('td').index(); 在新列上不起作用，我如何使它起作用，我尝试了一切但没有成功。提前致谢！
假设在addColumn() 中创建的 HTML 是有效的，那么这行代码应该可以工作。我建议检查输出 HTML，如果仍有问题，请创建一个新问题。
jsfiddle.net/e04yoc26 这是我用添加列按钮重新设计的方法，添加新列后，索引对他们不起作用
感谢您的示例。问题是因为您正在动态创建元素，因此您需要使用委托事件处理程序。我在这里为你修好了：jsfiddle.net/RoryMcCrossan/7zh29d8a。请注意，我还对代码进行了一些其他改进 - 我添加了 cmets 来解释它们。

【解决方案2】：

首先：$(document).ready() 侦听器仅用于声明输入的事件侦听器。其余代码可以在外面。

计算

您有十倍于相同的事件侦听器和函数对。通过使用$(this).parent().index() 获取包含单元格的输入的索引，您可以将其减少到只有一对。对于计算，您必须以该索引作为参数调用函数calculateSum()。

在函数中，您必须获取乘法列的头部单元格的值。您可以通过选择具有相同索引的th 并将其innerHTML 解析为数字来执行此操作。

let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());

最后你可以使用索引来选择带有连接的列，例如：$("#sum" + index)。

其余部分的工作方式与您的代码相同。

添加列

我建议不要在按钮中使用内联事件侦听器，而是在脚本中声明它。函数addColumn() 将是监听器的匿名函数：

$('#add_column').click(function() {...});

在该函数中，您首先必须获取新头部单元格的值（此处为 price）。该函数的其余部分仅在值为 true 时执行（!!price / 用于转换为布尔值的双重否定），这意味着用户输入了一个值。

然后你必须得到每行的输入数量，例如从第二行：

const cell_count = $("#tbl tr").eq(2).find('input').length;

以及表格行数，减去最后两行“数量”和“计算”：

const row_count = $("#tbl tr").length - 2;

之后，您必须向每个表格行添加一个新单元格。表的行数用于迭代具有输入的行，每行的输入数用于制作具有连接的 id 和类。

最后，您需要为输入重新声明事件侦听器，以便考虑新的输入。为此，您首先必须删除旧的侦听器，然后重新声明它们。

$("#tbl input").off('keyup').on('keyup', function() {...});

工作示例：

因为没有使用输入的名称和 ID，所以为了简单起见，我删除了它们。我将过时的var 更改为let 和const。

function calculateSum(index) {
  let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
  let sum = 0;
  index = index == 1 ? '' : index - 1;

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

$(document).ready(function() {
  $("#tbl input").on('keyup', function() {
    calculateSum($(this).parent().index());
  });
});



$('#add_column').click(function() {

  const price = prompt('Add the price for the new column (only digits):', '30');

  if (!!price) {

    const cell_count = $("#tbl tr").eq(2).find('input').length;
    const row_count = $("#tbl tr").length - 2;

    for (let i = 1; i < row_count; i++) {
      $("#tbl tr").eq(i).append(
        $('<td></td>').append(
          $('<input>').attr({
            type: 'text'
          }).addClass('txt' + cell_count)
        )
      );
    }

    $("#tbl tr").first().append(
      $('<th></th>').html(price + ' $')
    );

    $("#tbl tr:nth-last-child(2)").append(
      $('<td></td>').append(
        $('<span></span>').attr({
          id: ('sum' + cell_count)
        })
      )
    );

    $("#tbl tr:last-child").append(
      $('<td></td>').append(
        $('<span></span>').attr({
          id: ('calc' + cell_count)
        })
      )
    );

    $("#tbl input").off('keyup').on('keyup', function() {
      calculateSum($(this).parent().index());
    });

  }

});

.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add_column" class="button">Add Column</button>

<table id="tbl" class="tftable" border="1">
  <tr>
    <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"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 2</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 3</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 4</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 5</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 6</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 7</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 8</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 9</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></td>
  </tr>
  <tr>
    <td>Type 10</td>
    <td><input type="text" class="txt"></td>
    <td><input type="text" class="txt1"></td>
    <td><input type="text" class="txt2"></td>
    <td><input type="text" class="txt3"></td>
    <td><input type="text" class="txt4"></td>
    <td><input type="text" class="txt5"></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>
  <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>

【讨论】：