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將文本值parseInt轉換為數字。
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（默認窗口上下文，而不是DOM對象的上下文）
2. 無效的選擇器用於查找輸入字段
3. 除非您使用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);
    });
});