Jquery遍歷表

Question

的多個部分和字段這是我正在做的。我有一組div。每套div都可以包含一個節標題和一個項目列表。每件商品都有與之相關的價格。因此，拆除部分下的第1項價格爲150.00。 「拆除」一節中的第2項價格爲200.00。每個項目旁邊都有一個用戶可以輸入數字值的輸入字段。該值然後乘以項目價格。因此，在項目1（150.00）旁邊是我輸入2的字段。在下一個div中，我顯示總數。所以150.00 x 2 = 300.00。

我可以爲該部分下的每個項目執行此操作。然後，我將所有項目彙總到各部分旁邊的全球價格中。

下面是我在做什麼的樣本：

$(document).ready(function() { 
    $(".demolition_num").each(function() { 
    $(this).keyup(function(){ 
     calculateDemSum(); 
    }); 
    }); 
}); 


function calculateDemSum() { 
    var sum = 0; 
    $(".demolition_num").each(function(){ 
    if(!isNaN(this.value) && this.value.lenth != 0){ 
     var unitCost = $(".unit_cost1").text(); 
     var _parent = $(this).parent(); 
     var total = _parent.prev().html(); 
     sum += parseFloat(this.value * total); 
     var subtotal = this.value * total; 
     $(_parent).next().html(this.value * total); 
    } 
    else if (this.value.length !=0){ 
    } 
    }); 

    $(".cost1").text(sum.toFixed(2)); 
    $("#cost1").val(sum.toFixed(2)); 
} 

您可以查看這裏的所有代碼：http://jsfiddle.net/pmetzger/Xeu2T/3/

正如你可以在現在我有打電話給每一個看到的jQuery部分獨立 其他人，因爲我不想計算所有的領域，只是我正在修改的領域。

所以問題是，我可以避免必須添加每個部分輸入類型ID作爲觸發計算的關鍵，並確保總數得到正確放置？

注意：此代碼可能會被複制，但相關的數據會有所不同。所以在下一個客戶名單上，它可能不是拆遷，而是Demo等等。

任何幫助將不勝感激。

Answer 1

首先幾個指針：

1. 你並不需要一個each()循環中綁定的事件，只是 綁定到一個標準的選擇會結合適合 該選擇的所有元素。
2. 您也有多個具有相同ID的<tr>元素。
3. 你不需要對隱藏標籤

新的工作fiddle here和代碼size屬性：

$(document).ready(function() 
{ 
    // Bind the event 
    $("#calc").on("keyup", "input[type='text']", function() 
    { 
     calculateSum(this); 
    }); 
}); 

function calculateSum(element) 
{ 
    var sum = 0; 
    var $this = $(element); 
    var targetClass = $this.attr("class"); 

    // Process each element with the same class 
    $("." + targetClass).each(function() 
    { 
     var thisVal = $(this).val(); 

     // Count invalid entries as 0 
     if(isNaN(thisVal) || thisVal.length === 0) 
     { 
      thisVal = 0; 
     } 
     else 
     { 
      thisVal = parseFloat(thisVal); 
     } 

     // Get the unit cost and calculate sub-total 
     var unitCost = parseFloat($(this).parent().prev("td.unit_cost").text()); 
    var subTotal = thisVal * unitCost; 
    sum += subTotal; 
     $(this).parent().next("td").text(subTotal); 
    }); 

    var $item = $this.closest("tr").prevAll(".item").first(); 
    $item.find("input.section_cost").val(sum.toFixed(2)); 
    $item.find("td.section_cost").text(sum.toFixed(2)); 
} 

注意，我稍微修改你的HTML - 我改變了多個<tr id="item">使用類，我移動這些行以更好地定位您的小節總計，我添加了小節總計（隱藏輸入和顯示值），我添加了一個類到您的單位值字段，我添加了一個id到表。