Question

当我输入或删除＆＃34; ship＆＃34;时，如何动态更改值？值和如何做包括税13％和对总额的选择选项不含税。这是我的代码：Jsfifddle

<script>
(function() {
 "use strict";

$("table").on("change", "input", function() {
var row = $(this).closest("tr");
var qty = parseFloat(row.find(".quantity").val());
var price = parseFloat(row.find(".productprice").val());
var tcost = qty * price;
row.find(".tcost").val(isNaN(tcost) ? "" : tcost);

 var totalValue = 0;
 $(document).find(".tcost").each(function(){
totalValue += parseFloat($(this).val());
 });
 var tax = totalValue * 13/100;
 $("#tax").val(tax);

 totalValue = totalValue + tax;

 var ship = $('#ship').val();
 totalValue = parseFloat(totalValue) + parseFloat(ship);


 $("#total").val(totalValue);
});

})();   
</script>

Answer 1

我不是故意冒犯，但你的代码需要帮助。首先，让我引导您完成对HTML的一些修复。

<tr for="input01">错了。 <tr>没有for属性。您还需要为有效的HTML分隔您的属性。

您的第<input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" class="price" disabled/>行有两个类属性。

现在，修复。基本上你的代码失败的原因是双重的：

Number vs. ParseFloat ：javascript中的Number数据类型转换函数的处理方式与parseFloat略有不同，特别是在空字符串方面。 Number会将''变为0而parseFloat会将其变为NaN。
范围：您的row.find(class)方法未延伸到税和运费字段，因为这些不属于表格。此外，您的事件处理程序仅适用于<table>，但运费和税务计算器不在table，body甚至document。因此，当您尝试访问.val()上的row.find('.shipping')方法时，您获得了NaN。

此外，关于事件处理程序的第二个参数是input，没有提供select的更改事件。

I've fixed your code with a jsFiddle where I address these issues and fix your HTML as well。如果链接无法访问，我已经包含了以下代码。

<强> HTML

<table class="table table-bordered inventory" style="width:95%;float:right;">
    <thead>
        <tr>
            <th>
                <input class='check_all' type='checkbox' onclick="select_all()" />
            </th>
            <th>S. No</th>
            <th>Product Name</th>
            <th>Item Code</th>
            <th>Quantity</th>
            <th>Price per Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type='checkbox' class='case' />
            </td>
            <td><span id='snum'>1.</span>

            </td>
            <td>
                <input type='text' id='productname_1' name='productname[]' required />
            </td>
            <td>
                <input type='text' id='itemcode_1' name='itemcode[]' required />
            </td>
            <td>
                <input type='text' class="number quantity" id='quantity_1' name='quantity[]' style="width:165px;" required />
            </td>
            <td>
                <input type='text' class="number productprice" id='productprice_1' name='productprice[]' style="width:165px;" required />
            </td>
            <td>
                <input type='text' class="number tcost" id='tcost_1' name='tcost[]' style="width:165px;" />
            </td>
        </tr>
    </tbody>
</table>
<div class="" style="width:280px; float:right;">
    <br>
    <label>Tax Type
        <select class="number" style="margin-left: 8px;" id="taxoptions" required>
            <option value="">Select Tax Type</option>
            <option value="excludetax">Exclude Tax</option>
            <option value="Includetax">Include Tax</option>
        </select>
    </label>
    <br>
    <label style="margin-left: 33px;">13%
        <input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" disabled />
        <br>
        <br>
    </label>
    <input type='text' id='ship' name='ship' placeholder="shipping amount" class="ship" style="margin-left: 51px;" />
    <br>
    <br>
    <input type='text' id='total' name='total' placeholder="Total amount" class="total" style="margin-left: 60px;" />
    <br>
    <br>
    <label class="checkbox inline" style="margin-left: 60px;">
        <input id="inlineCheckbox1" type="checkbox" value="sendemail">Send E-mail</label>
    <br>
    <br>    <span>
                                                    <input type="submit" value="submit" name="submit" class='btn btn-success' style="width:100px; margin-left: 54px;" />
                                                    <button type="button" class='btn btn-success' style="width:100px; margin-left: 22px;">Print</button>
                                                </span>

</div>

<强>的Javascript

 (function () {

     $(document).on("change", "input, select", function (e) {
         var row = $(this).closest("tr");
         var qty = Number(row.find(".quantity").val());
         var price = Number(row.find(".productprice").val());
         var ship = Number($("#ship").val());
         var tcost = 0;
         tcost = qty * price;
         var totalValue = 0;
         var taxAmount = 0;

         row.find(".tcost").val(isNaN(tcost) ? "" : tcost);
         totalValue += Number($("#tcost_1").val());
         console.log(row.find(".tcost").val());

         if ($('#taxoptions').val() != 'Includetax') {
             taxAmount = 0;
             $('#tax').val(taxAmount);
         } else {
             taxAmount = totalValue * .13;
             $('#tax').val(taxAmount);
         }


         totalValue += Number(taxAmount + ship);

         $('#total').val(totalValue);

     });

 })();

如何处理选择选项排除值或包含值

1 个答案: