我想在使用jquery编辑值时添加列值

时间:2014-12-30 07:43:54

标签: jquery html jsp

我目前在aproject工作,在管理员编辑价格时计算价格金额。 我想在使用jquery编辑值时添加列值。请给我一些示例,当我编辑值时,如何实现对列值的求和。 http://jsfiddle.net/unKDk/13/

  <script type="text/javascript">
  var totals=[0,0,0];
  $(document).ready(function(){

  var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
  alert("inside");
  $dataRows.each(function() {
    $(this).find('.rowDataSd').each(function(i){        
        totals[i]+=parseInt( $(this).html());
    });
  });
$("#sum_table td.totalCol").each(function(i){  
    $(this).html("total:"+totals[i]);
  });

 });

</script>



       <table id="sum_table" class="display" style="float:left; width: 100%;border-radius: 
       5px 5px 5px 5px;
                        box-shadow: 2px 2px 6px #666666;-moz-
    box-sizing: none;" border=1 data="${bidding}" >


                        <tr>
                        <th style="color:#3300CC;  align:center" colspan="14">Double-
                    </tr>
                        <tr>  
                            <td  class="heading">Bidding Id</td>
                            <td class="heading">Category</td>
                            <td class="heading">Sub-Category</td>
                            <td class="heading">Item Name</td>
                            <td class="heading">UOM</td>
                            <td class="heading" style="color:#3300CC">Unit Rate</td>
                            <td class="heading">Quantity</td>
                            <td class="heading">Amount</td>
                            <td class="heading" style="color:#3300CC">Service Tax</td>
                            <td class="heading">Total Amount</td>
                        </tr>


                    <c:forEach items="${biddings}" var="bidding" >
                        <tr>
                        <td>${bidding.biddingId}<input type="hidden" name="biddingId${bidding.biddingId}"  
                      value=${bidding.biddingId}></td> 
                            <td>${bidding.category}</td>
                             <td>${bidding.subCategory}</td> 
                             <td>${bidding.itemName}</td>  
                             <td>${bidding.uom}</td>  
                            <!-- editable -->
                             <td contenteditable='false' style="color:#3300CC"><input type="text" 
         name="unitRate" id="unitRate${bidding.unitRate}">${map.bidding.unitRate}</td>
                             <td>${bidding.quantity}</td>
                             <td>${bidding.amount}</td>
                            <!-- editable  -->
                             <td contenteditable='false' style="color:#3300CC"><input type="text" 
    name="serviceTaxValue" id="serviceTaxValue${bidding.serviceTaxValue}">${map.bidding.serviceTaxValue}</td>
                             <td>${bidding.totalAmount}</td>  

                                <tr style="color: blue; font-weight: bold;">
                        <td  colspan="5"></td>
                             <td class="totalCol" colspan="3">${bidding.priceTotal}</td>  
                            <td  class="totalCol" colspan="1">${bidding.serviceTaxTotal}</td>  
                             <td class="totalCol" colspan="1">${bidding.grandTotal}</td>  
                        </tr>




            </table>

1 个答案:

答案 0 :(得分:0)

好的,我希望我能正确理解......

FIDDLE DEMO

HTML:

<tr>
    <td class="rowDataSd">Orange</td>
    <td class="rowDataSd">2</td>
    <td class="rowDataSd">
        <input name='amountInfo' value='5' />
    </td>
</tr>

jquery的一部分:

$('input[name="amountInfo"]').on('input', function () {
          total = 0;
          $dataRows.each(function () {
              var amountInfo = parseInt($(this).find('input[name="amountInfo"]').val());
              amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0
              total += amountInfo;
          });
          $('.totalCol').html("Total:" + total);
      });

基本上我会监听任何输入更改,然后检索每行的新值并更新总计。