테이블의 여러 섹션과 필드를 반복하는 Jquery

Question

여기 내가하고있는 일이 있습니다.

나는 div 집합을 가지고 있습니다. div의 각 집합에는 섹션 헤더와 항목 목록이 포함될 수 있습니다. 각 항목에는 연관된 가격이 있습니다. 따라서 철거 섹션 아래 항목 1의 가격은 150.00입니다. 철거 절의 2 번 항목의 가격은 200.00입니다. 각 항목 옆에는 사용자가 숫자 값을 입력 할 수있는 입력 필드가 있습니다. 이 값에 품목 가격이 곱해집니다. 따라서 항목 1 (150.00) 옆에 2를 입력하는 입력란이 있습니다. 다음 div에 총계가 표시됩니다. 그래서 150.00 x 2 = 300.00.

섹션 아래의 각 항목에 대해이 작업을 수행 할 수 있습니다. 그런 다음 전체 항목을 섹션 옆의 하나의 글로벌 가격으로 합칩니다. 당신이 바로 지금은 각 전화를해야 JQuery와에서 볼 수 있듯이 http://jsfiddle.net/pmetzger/Xeu2T/3/

:

$(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)); 
} 

당신은 여기에 모든 코드를 볼 수 있습니다 여기에

은 내가 뭘하는지의 샘플입니다 섹션의 모든 부분을 계산하고 싶지 않기 때문에 다른 부분의 을 독립적으로 수정합니다.

그래서 각 섹션 입력 유형 ID를 키로 추가하여 계산을 트리거하고 합계가 올바르게 배치되지 않도록 할 수 있습니까?

참고 :이 코드는 중복 될 수 있지만 관련 데이터는 달라집니다. 따라서 다음 클라이언트 목록에서는 철거가 아니라 데모 등이 될 수 있습니다.

도움이 될 것입니다. 포인터의 모든 부부의

Answer 1

첫째 :

1. 당신은 each() 루프 내 이벤트를 바인딩 단순히 표준 선택에 바인딩 선택하는 것이 에 맞게 모든 요소에 바인딩 할 필요가 없습니다.
2. 동일한 ID를 가진 복수 <tr> 요소가 있습니다. 내가 사용하는 여러 <tr id="item">을 변경 -

   $(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을 수정 한 :

3. 당신은 fiddle here하고 코드를 작업

새로운 숨겨진 태그에 size 속성을 필요로하지 않습니다 클래스에서 하위 행 합계를 더 잘 타겟팅하도록 행을 옮겼습니다. 하위 섹션 합계 (숨겨진 입력 값과 표시된 값 모두)에 클래스를 추가하고 클래스에 단위 값 필드를 추가하고 테이블에 ID를 추가했습니다.