2013-01-14 37 views
0

我希望能夠動態更新「新」列下的總值,只要用戶對任何表格單元格進行更改。我需要找到一個表中的列的總值,排除最後一行

DOM:

<div id='lc_adjustments'> 
    <table id='adjustments' cellspacing='0' width='550px' class='lc_nf' border='0' 
    cellpadding='0'> 
    <tbody> 
     <tr> 
     <td> 
      <table cellspacing='0' width='100%' class='lcb' border='0' cellpadding='0'> 
      <tr> 
       <td> 
       <table cellspacing='1' width='100%' class='ibody' border='0' cellpadding='0'> 
        <colgroup> 
        <col width='250px'></col> 
        <col width='150px'></col> 
        <col width='150px'></col> 
        </colgroup> 
        <tr class='header'> 
        <td>Item Name</td> 
        <td>Current Value</td> 
        <td>New Value</td> 
        </tr> 
        <tr onmouseover='high(this);' class='even' onmouseout='low(this);'> 
        <td class='cl'>Item number 1</td> 
        <td class='cl'>89.50</td> 
        <td class='cl'> 
         <input class='clsMandatoryReal' onchange='getTotal();' id='totalable' 
         value='89.50' size='25' type='text'> 
        </td> 
        </tr> 
        <tr onmouseover='high(this);' class='odd' onmouseout='low(this);'> 
        <td class='cl'>Item number 2</td> 
        <td class='cl'>69.70</td> 
        <td class='cl'> 
         <input class='clsMandatoryReal' onchange='getTotal();' id='totalable' 
         value='69.70' size='25' type='text'> 
        </td> 
        </tr> 
        <tr onmouseover='high(this);' style='font-weight: bold;' onmouseout='low(this);' 
        class='even'> 
        <td class='cl'>TOTAL STOCK MASS</td> 
        <td class='cl'>?</td> 
        <td class='cl'>?</td> 
        </tr> 
       </table> 
       </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

我已經嘗試這樣做jQuery的,但我的功能似乎並沒有工作:

function getTotal() { 

    var total = 0.0; 

    //iterate over each of the cells 
    $('table.ibody tbody tr'). 
    children('td.cl'). 
    children('input#totalable:not(:last)').each(function() { 

    total += $(this).text(); 
    }); 

    $('table.ibody tbody tr'). 
    children('td.cl'). 
    children('input#totalable:last)').value = total; 

    alert(total); 

} 

我願意在任何的jQuery或JavaScript解決方案。這個html部分是由Struts生成的,這意味着在大多數情況下我沒有太多的關於html class/id的信息。

+4

首先,你不能用一個ID超過一次,所以使用文本框類,而不是一個ID。 – Archer

+0

警報是什麼意思?你沒有給我足夠的代碼讓我在jsfiddle中重新創建它... – chrisbradbury

+1

使用類來代替'totlable'的id。在頁面上不能有多個相同名稱的ID – Scrimothy

回答

0

這最終爲我工作:

功能getTotal(){

  var total = 0.0; 

     $('table.ibody tbody tr'). 
     children('td.cl'). 
     children('input#totalable').each(function(){ 
      total += parseFloat(this.value); 
     }); 

     $('table.ibody tbody tr'). 
     children('td.cl'). 
     children('div#totalable').html(total); 

     alert(total); 

} 
2

這裏是一個jQuery選擇:

var total = 0; 

//Iterate all td's in second column 
$('#adjustments>tbody>tr>td:nth-child(2)').each(function(){ 
    total += parseFloat($(this).text()) || 0;  
}); 

alert(total) 
相關問題