如何將輸入字段的行和求和

我已經搜索了很多並找不到解決方案，並且由於我的代碼能力有限，所以我尋求幫助。如何將輸入字段的行和求和

我所試圖做的是究竟是什麼在這裏找到：http://jsfiddle.net/unKDk/335/

$(function(){ 
    var $iTableTotals = $("#iTable .colTotal"); 
    var $eTableTotals = $("#eTable .colTotal"); 
    var $diffValues = $(".diffValue"); 
    $(".colTotal").on('change keyup', function() { 
     $iTableTotals.each(function(i){ 
      var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val()); 
      $diffValues.eq(i).val(diff); 
     }); 
    }); 
    $iTableTotals.eq(0).change(); 
});

但我想有輸入字段，而不是預先加載的數字。爲了闡明，我在網上發現了這個代碼，我不是這個代碼的作者。

謝謝。

來源

2014-07-26 xandeacf

那麼，什麼是不工作？ – Busches

請澄清：所以你想要標記爲「Row1」，「Row2」和「Row3」（除「總行」單元格）行中的單元格爲輸入框而不是靜態數字？ –

不完全確定您輸入字段而不是預先加載的數字的含義。請參閱分叉的小提琴，希望這是你的意思： http://jsfiddle.net/B9EWd/

HTML：

<table id="sum_table" width="300" border="1"> 
     <tr class="titlerow"> 
      <td></td> 
      <td>Apple</td> 
      <td>Orange</td> 
      <td>Watermelon</td> 
      <td>Strawberry</td> 
      <td>Total By Row</td> 
     </tr> 
     <tr> 
      <td> Row1</td> 
      <td class="rowAA"><input value="7" /></td> 
      <td class="rowAA"><input value="2" /></td> 
      <td class="rowBB"><input value="3" /></td> 
      <td class="rowBB"><input value="4" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr> 
      <td> Row2</td> 
      <td class="rowAA"><input value="1" /></td> 
      <td class="rowAA"><input value="2" /></td> 
      <td class="rowBB"><input value="3" /></td> 
      <td class="rowBB"><input value="4" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr> 
      <td>Row3</td> 
      <td class="rowAA"><input value="1" /></td> 
      <td class="rowAA"><input value="5" /></td> 
      <td class="rowBB"><input value="3" /></td> 
      <td class="rowBB"><input value="4" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr class="totalColumn"> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
     </tr> 
</table>

的Javascript：

function updateTotals() { 
    $("#sum_table tr:not(:first,:last) td:last-child").text(function(){ 
     var t = 0; 
     $(this).prevAll().find("input").each(function(){ 
      t += parseInt($(this).val(), 10) || 0; 
     }); 
     return t; 
    }); 

    $("#sum_table tr:last td:not(:first,:last)").text(function(i){ 
     var t = 0; 
     $(this).parent().prevAll().find("td:nth-child("+(i + 2)+") input").each(function(){ 
      t += parseInt($(this).val(), 10) || 0; 
     }); 
     return "Total: " + t; 
    }); 
} 

$("input").change(updateTotals); 
updateTotals();

來源

2014-07-26 22:41:38 Blondie

這正是我的意思，謝謝。在桌子的最後位置總計總數會更好。 – xandeacf

請嘗試使用下面的代碼片段。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      getTotal(); 

      $(".txtNumber").change(function() { 
       getTotal(); 
      }); 
     }); 

     function getTotal() { 
      $("#sum_table tr:not(:first,:last) td:last-child").text(function() { 
       var t = 0; 
       $(this).prevAll().each(function() { 
        t += parseInt($(this).find('input').val(), 10) || 0; 
       }); 
       return t; 
      }); 

      $("#sum_table tr:last td:not(:first,:last)").text(function (i) { 
       var t = 0; 
       $(this).parent().prevAll().find("td:nth-child(" + (i + 2) + ")").each(function() { 
        t += parseInt($(this).find('input').val(), 10) || 0; 
       }); 
       return "Total: " + t; 
      }); 
     } 


    </script> 
</head> 
<body> 
    <table id="sum_table" width="300" border="1"> 
     <tr class="titlerow"> 
      <td></td> 
      <td>Apple</td> 
      <td>Orange</td> 
      <td>Watermelon</td> 
      <td>Strawberry</td> 
      <td>Total By Row</td> 
     </tr> 
     <tr> 
      <td>Row1</td> 
      <td class="rowAA"> 
       <input type="text" value="1" class="txtNumber" /></td> 
      <td class="rowAA"> 
       <input type="text" value="2" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="3" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="4" class="txtNumber" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr> 
      <td>Row2</td> 
      <td class="rowAA"> 
       <input type="text" value="1" class="txtNumber" /></td> 
      <td class="rowAA"> 
       <input type="text" value="2" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="3" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="4" class="txtNumber" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr> 
      <td>Row3</td> 
      <td class="rowAA"> 
       <input type="text" value="1" class="txtNumber" /></td> 
      <td class="rowAA"> 
       <input type="text" value="5" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="3" class="txtNumber" /></td> 
      <td class="rowBB"> 
       <input type="text" value="4" class="txtNumber" /></td> 
      <td class="totalRow"></td> 
     </tr> 
     <tr class="totalColumn"> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
      <td class="totalCol"></td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2014-07-26 22:32:38

正是我的意思。在表格的最後位置上總計總數也是很好的。 – xandeacf

如何將輸入字段的行和求和

回答

相關問題