javascript - 如何将表输入相乘

Question

我在将表格的两列相乘，将结果输出到第三列，然后将总计添加到小计中时遇到问题。

我已经找到了可以添加输入字段但不能相乘的地方。下面是一个 jsFiddle，我尝试在其中进行乘法，但它不起作用

我认为问题与乘以零有关，但我不确定我到底哪里出错了

我的代码:

$('table input').on('input', function() {
  var $tr = $(this).closest('tr');
  var total = 0;
  $('input:not(:last)', $tr).each(function() {
    total *= Number($(this).val()) || 0;
    console.log(total)
  });
  $('td:last input', $tr).val(total);
  subTotalPrice();
}).trigger('input');


function subTotalPrice() {
  var total = 0;
  $(".amount").each(function() {
    total += parseFloat($(this).val() || 0);
  });
  $("#subTotalResult").text(total);
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
  <tbody align="left">
    <tr>
      <td colspan="5" class="tablzag2">
        From Our Smoker
      </td>
    </tr>
    <tr class="tablzag3">
      <td colspan="2" class="tablzag3">
        Menu Items
      </td>
      <td align="center" class="tablzag3">
        Servings
      </td>
      <td align="center" class="tablzag3">
        Per Servings
      </td>
      <td align="center" class="tablzag3">
        Ext Cost
      </td>
    </tr>
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        BBQ Beef Brisket
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--pulled pork row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Pulled Pork
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Boneless/Skinless Chicken Breast-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Boneless/Skinless Chicken Breast
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Smoked Leg Quarter Row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Smoked Leg Quarter
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--1/2 Cornish Hen-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        1/2 Cornish Hen
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Buffet Ham-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Buffet Ham
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Mild or Hot Links in BBQ Sauce-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Mild or Hot Links in BBQ Sauce
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--BBQ Pork Spareribs-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        BBQ Pork Spareribs
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Bratwurst Row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Bratwurst
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--subtotal for "from our smoker" row-->
    <tr>
      <td colspan="4" align="right" valign="middle" class="subTotalResult">
        Subtotal for "From our Smoker" :
      </td>
      <td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
        <span id="subTotalResult">
      0.00
     </span>
      </td>
    </tr>
  </tbody>
</table>
<style>
  .tablzag3 {
    padding: 5px;
    height: 20px;
    background-color: #75A3D3;
    font-family: Tahoma, Helvetica, Sans-serif;
    margin: 0px;
    color: #fff;
    font-weight: normal;
  }
  
  .tablzag2 {
    padding: 5px;
    height: 20px;
    background-color: #4C759F;
    font-family: Tahoma, Helvetica, Sans-serif;
    margin: 0px;
    color: #fff;
    font-weight: normal;
  }
  
  .tablechet {
    padding: 2px 5px 2px 5px;
    height: 24px;
    color: #627484;
  }
  
  .tablcheta {
    padding: 2px 5px 2px 5px;
    height: 24px;
    color: #627484;
    font-weight: bold;
    text-decoration: underline;
  }
  
  .subTotalResult {
    height: 24px;
    background-color: #E4EEF8;
    margin: 0px;
    color: #627484;
    font-weight: bold;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
  }
</style>

Answer 1

如果您要将一系列数字相乘，则需要使用 1 初始化乘积，而不是 0。乘以零产生零，乘以一产生相同的值。

您还应该使用 toFixed() 丢弃处理 float 时经常出现的额外小数位。

您还有一个拼写错误:maxlenght 应该是 maxlength。

$('table input').on('input', function() {
  var $tr = $(this).closest('tr');
  var total = 1;
  $('input:not(:last)', $tr).each(function() {
    total *= Number($(this).val()) || 0;
  });
  $('td:last input', $tr).val(total.toFixed(2));
  subTotalPrice();
}).trigger('input');


function subTotalPrice() {
  var total = 0;
  $(".amount").each(function() {
    total += parseFloat($(this).val() || 0);
  });
  $("#subTotalResult").text(total.toFixed(2));
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
  <tbody align="left">
    <tr>
      <td colspan="5" class="tablzag2">
        From Our Smoker
      </td>
    </tr>
    <tr class="tablzag3">
      <td colspan="2" class="tablzag3">
        Menu Items
      </td>
      <td align="center" class="tablzag3">
        Servings
      </td>
      <td align="center" class="tablzag3">
        Per Servings
      </td>
      <td align="center" class="tablzag3">
        Ext Cost
      </td>
    </tr>
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        BBQ Beef Brisket
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlength="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--pulled pork row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Pulled Pork
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Boneless/Skinless Chicken Breast-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Boneless/Skinless Chicken Breast
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Smoked Leg Quarter Row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Smoked Leg Quarter
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--1/2 Cornish Hen-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        1/2 Cornish Hen
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Buffet Ham-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Buffet Ham
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Mild or Hot Links in BBQ Sauce-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Mild or Hot Links in BBQ Sauce
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--BBQ Pork Spareribs-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        BBQ Pork Spareribs
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--Bratwurst Row-->
    <tr valign="middle">
      <td width="50%" align="left" class="tablchet">
        <div align="left">
          <!--need to add in descending container script later-->
          <a href="javascript:show_desc_incomplete;" class="tablchet">
            <span class="tablcheta">
        Bratwurst
       </span>
          </a>
        </div>
      </td>
      <td alight="left" class="tablchet">
        <div align="center">
        </div>
      </td>
      <!--quantity input-->
      <td width="10%" align="center">
        <input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
      </td>
      <!--unit price-->
      <td width="15%" align="right">
        <!--need to add in ability to have currency listed in value and then key out currency-->
        <input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
      </td>
      <!--Ext Cost-->
      <td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
        <input type="text" class="amount" value="0.00" readonly="">
      </td>
    </tr>
    <!--subtotal for "from our smoker" row-->
    <tr>
      <td colspan="4" align="right" valign="middle" class="subTotalResult">
        Subtotal for "From our Smoker" :
      </td>
      <td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
        <span id="subTotalResult">
      0.00
     </span>
      </td>
    </tr>
  </tbody>
</table>
<style>
  .tablzag3 {
    padding: 5px;
    height: 20px;
    background-color: #75A3D3;
    font-family: Tahoma, Helvetica, Sans-serif;
    margin: 0px;
    color: #fff;
    font-weight: normal;
  }
  
  .tablzag2 {
    padding: 5px;
    height: 20px;
    background-color: #4C759F;
    font-family: Tahoma, Helvetica, Sans-serif;
    margin: 0px;
    color: #fff;
    font-weight: normal;
  }
  
  .tablechet {
    padding: 2px 5px 2px 5px;
    height: 24px;
    color: #627484;
  }
  
  .tablcheta {
    padding: 2px 5px 2px 5px;
    height: 24px;
    color: #627484;
    font-weight: bold;
    text-decoration: underline;
  }
  
  .subTotalResult {
    height: 24px;
    background-color: #E4EEF8;
    margin: 0px;
    color: #627484;
    font-weight: bold;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
  }
</style>