Question

我的表格如下：

＆＃13;

<tr><td><input name="sub[0][amount]" value="" placeholder="amount" class="form-control" type="text">
<input name="sub[0][tax]" value="" placeholder="tax" class="form-control" type="text">
<input name="sub[0][deduction]" value="" placeholder="deduction" class="form-control" type="text">
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[1][amount]" value="" placeholder="amount" class="form-control" type="text">
<input name="sub[1][tax]" value="" placeholder="tax" class="form-control" type="text">
<input name="sub[1][deduction]" value="" placeholder="deduction" class="form-control" type="text">
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[2][amount]" value="" placeholder="amount" class="form-control" type="text">
<input name="sub[2][tax]" value="" placeholder="tax" class="form-control" type="text">
<input name="sub[2][deduction]" value="" placeholder="deduction" class="form-control" type="text">
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[3][amount]" value="" placeholder="amount" class="form-control" type="text">
<input name="sub[3][tax]" value="" placeholder="tax" class="form-control" type="text">
<input name="sub[3][deduction]" value="" placeholder="deduction" class="form-control" type="text">
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[4][amount]" value="" placeholder="amount" class="form-control" type="text">
<input name="sub[4][tax]" value="" placeholder="tax" class="form-control" type="text">
<input name="sub[4][deduction]" value="" placeholder="deduction" class="form-control" type="text">
<p class="form-control-static"> pure_amount </p></td></tr>

＆＃13;

我想计算每行的pure_amount = sub[x][amount] - sub[x][tax] - sub[x][deduction]以及表格末尾每列的总和。

感谢您的帮助。

Answer 1

将以下jquery代码添加到您的文件中。请在我的代码中建议任何修改。

 <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(document).ready(function(){
        $("input").on('blur', function(){
            var parent_tr = $(this).parents().closest('tr').addClass('fun');
        var amount= $(".fun").find("input[name='sub[0][amount]']").val()
        var tax= $(".fun").find("input[name='sub[0][tax]']").val();
        var deduction= $(".fun").find("input[name='sub[0][deduction]']").val();
        var final_amt= amount - tax - deduction;

        if(amount!="" && tax!=""  && deduction!=""){
        $(parent_tr).find(".amount").text(final_amt);
        $(parent_tr).removeClass('fun');
        }
    });
    });
  </script>

Answer 2

以上代码仅适用于第一行。我想要计算每一行

    <table>
<tr><td><input name="sub[0][amount]" value="" placeholder="amount" class="form-control" type="text"></td><td>
<input name="sub[0][tax]" value="" placeholder="tax" class="form-control" type="text"></td><td>
<input name="sub[0][deduction]" value="" placeholder="deduction" class="form-control" type="text"></td><td>
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[1][amount]" value="" placeholder="amount" class="form-control" type="text"></td><td>
<input name="sub[1][tax]" value="" placeholder="tax" class="form-control" type="text"></td><td>
<input name="sub[1][deduction]" value="" placeholder="deduction" class="form-control" type="text"></td><td>
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[2][amount]" value="" placeholder="amount" class="form-control" type="text"></td><td>
<input name="sub[2][tax]" value="" placeholder="tax" class="form-control" type="text"></td><td>
<input name="sub[2][deduction]" value="" placeholder="deduction" class="form-control" type="text"></td><td>
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[3][amount]" value="" placeholder="amount" class="form-control" type="text"></td><td>
<input name="sub[3][tax]" value="" placeholder="tax" class="form-control" type="text"></td><td>
<input name="sub[3][deduction]" value="" placeholder="deduction" class="form-control" type="text"></td><td>
<p class="form-control-static"> pure_amount </p></td></tr>

<tr><td><input name="sub[4][amount]" value="" placeholder="amount" class="form-control" type="text"></td><td>
<input name="sub[4][tax]" value="" placeholder="tax" class="form-control" type="text"></td><td>
<input name="sub[4][deduction]" value="" placeholder="deduction" class="form-control" type="text"></td><td>
<p class="form-control-static"> pure_amount </p></td></tr>

.
.
.
<tr><td>amount_sum</td><td>
tax_sum</td><td>
deduction_sum</td><td>
pure_amount_sum</td></tr>
</table>

Bootstrap，jQuery，表格表格，行总计和子总计

2 个答案: