jquery實現價格累加顯示效果

顯示效果:
實現的頁面效果如下:
HTML頁面:

<table cellpadding="0" cellspacing="0" class="t_center m_table">
    <thead>
        <tr class="white">
                                            <td   ><input type="checkbox" style="margin:0 6px;" id="allSelect" class="allSelect"/></td>
                    <td   >本期應還日期</td>
                    <td   >借款產品</td>
                    <td   >申請編號</td>
                    <td   >本期應還金額(元)</td>
                </tr>
    </thead>
    <tbody>
                        <tr >
                                                                                                    <td >
                    <input type="checkbox" onclick="calcuAmount()" id="singleSelect" class="singleSelect" name="checkFordis" value="27756" />               </td>
                                                                                                            <td >
                    2016-10-10              </td>
                                                                                                            <td >
                    養豬貸             </td>
                                                                                                            <td >
                    20160830005             </td>
                                                                                        <td >
                    應還:<span class="fb" id="currentPayment" >3.75</span> (本金:0.00、利息:3.75、
        違約金:0.00、罰息:0.00、其他:0.00)               </td>

        </tr>
                <tr >
                                                                                                    <td >
                    <input type="checkbox" onclick="calcuAmount()" id="singleSelect" class="singleSelect" name="checkFordis" value="27884" />               </td>
                                                                                                            <td >
                    2016-10-10              </td>
                                                                                                            <td >
                    養豬貸             </td>
                                                                                                            <td >
                    20160901203             </td>
                                                                                        <td >
                    應還:<span class="fb" id="currentPayment" >9.75</span> (本金:0.00、利息:9.75、
        違約金:0.00、罰息:0.00、其他:0.00)               </td>

        </tr>
                    </tbody>
</table>

js代碼(使用了jquery的選擇器$(“#currentPayment”,_parent),獲取子元素):

function calcuAmount(){
        var sum = 0 ;
        $(".singleSelect").each(function(index,element){
            var _parent=$(this).parent().parent();
            if($(this).is(':checked')){
                var _txt=$("#currentPayment",_parent).text();
                sum = sum + parseFloat(_txt);
            }
        });
        $("#sumToShow").html("合計:應還金額" + sum + "元");
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章