JQuery總結特定錶行中的所有數據

Question

我在每個單元格中都有一個輸入表，除了指定每個錶行總數的一個（.total）外。當其中一個輸入發生改變時，我希望該行的總和發生變化。以下是我所能得到的。 的HTML：

<table> 
    <tr> 
     <td><input value = "100"/></td> 
     <td><input value = "100"/></td> 
     <td><input value = "100"/></td> 
     <td class="total">300</td> 
    </tr> 
    <tr> 
     <td><input value = "200"/></td> 
     <td><input value = "200"/></td> 
     <td><input value = "200"/></td> 
     <td class="total">600</td> 
    </tr> 
</table> 

現在的jQuery的：

//add keyup handler 
    $(document).ready(function(){ 
     $("input").each(function() { 
      $(this).keyup(function(){ 
       newSum(); 
      }); 
     }); 
    }); 

    function newSum() { 
     var sum = 0; 
     var thisRow = $(this).closest('tr'); 

     //iterate through each input and add to sum 
     $(thisRow).("td:not(.total) input:text").each(function() { 
       sum += this.value;    
     }); 

     //change value of total 
     $(thisRow).(".total").html(sum); 
    } 

中找出我做了什麼錯事都將受到極大的讚賞任何幫助。謝謝！

Answer 1

你的主要問題是在你的功能中使用this。如果您將該函數的主體直接放在keyup處理程序中，它應該可以工作。但是在單獨聲明的函數的主體中的this本質上將涉及它是其方法的對象。在上述情況下，該對象將是window。

試試這個：

$(document).ready(function(){ 
    $("input").each(function() { 
     var that = this; // fix a reference to the <input> element selected 
     $(this).keyup(function(){ 
      newSum.call(that); // pass in a context for newsum(): 
           // call() redefines what "this" means 
           // so newSum() sees 'this' as the <input> element 
     }); 
    }); 
}); 

您還可以在newSum()一些膚淺的錯誤：

function newSum() { 
    var sum = 0; 
    var thisRow = $(this).closest('tr'); 

    thisRow.find('td:not(.total) input:text').each(function(){ 
    sum += parseFloat(this.value); // or parseInt(this.value,10) if appropriate 
    }); 

    thisRow.find('td.total input:text').val(sum); // It is an <input>, right? 
} 

Answer 2

我能找到一對夫婦的問題及改進措施

1. 總結文本值將串連所有的輸入值，而不是數值。您必須使用例如文本將文本值轉換爲數字。 parseInt或parseFloat。
2. $(this).closest('tr')不返回一組。如果您從事件處理程序傳遞事件對象，則可以將其更改爲$(event.target).closest('tr')。原因在於this在默認上下文中不在事件上下文中進行評估。
3. 您應該使用onchange事件而不是onkeyup事件：沒有必要使用不完整的信息更新總和。
4. 您可以使用$(selector).keyup(function() {})綁定事件，您不需要使用.each函數。
5. 如果您在定義函數之前使用函數，JSLint會發出警告。
6. td:not(.total) input:text在當前環境中有點特定 - 可以簡化。

有一些修改

function newSum(event) { 
    var sum = 0; 
    var thisRow = $(event.target).closest('tr'); 
    thisRow.find("td input").each(function() { 
     sum += parseInt(this.value); 
    }); 


    thisRow.find(".total").html(sum); 
} 

$("input").change(function(event) { 
    newSum(event); 
}); 

如果newSum功能沒有了解的情況下儘可能多的如組成可能是更好的解決方案

function sumInputsIn(inputs) { 
    var sum = 0; 
    inputs.each(function() { 
     sum += parseInt(this.value, 10); 
    }); 
    return sum; 
} 

$("input").change(function(event) { 
    var row = $(event.target).closest('tr'); 
    row.find('.total').html(sumInputsIn(row.find('td input'))); 
}); 

Answer 3

以下幾點應該解決的問題有幾點。

1. newSum被稱爲與
2. 無效選擇用於查找輸入字段
3. 你總結意志值錯誤的情況下（默認的窗口背景，而不是DOM對象的上下文）除非你使用parseInt函數
被視爲文本

代碼：

//add keyup handler 
$(document).ready(function(){ 
    $("input").each(function() { 
     $(this).keyup(function(){ 
      newSum.call(this); 
     }); 
    }); 
}); 

function newSum() { 
    var sum = 0; 
    var thisRow = $(this).closest('tr'); 
    //iterate through each input and add to sum 
    $(thisRow).find("td:not(.total) input").each(function() { 
      sum += parseInt(this.value);  
    }); 

    //change value of total 
    $(thisRow).find(".total").html(sum); 
} 

Answer 4

$(document).ready(function(){ 
    $("input").keyup(function(){ 
     var suma = 0; 
     $(this).parents("tr").children("td").children().each(function(){ 
      suma+= parseInt($(this).val()); 
     }); 
     $(this).parent().parent().children(":last").text(suma); 
    }); 
});