jquery를 사용하여 행 합계 및 테이블 총계를 가져옵니다.

Question

이렇게 짧은 버전입니다. each() 이전에 선택기의 일치하는 요소 내의 요소 만 트래버스 할 수 있습니까? 또는 each() 루프없이 원하는 것을 얻는 간단한 방법이 있습니까?

---

이것이 훨씬 쉬워 져서 jquery를 통과하는 요소의 기본 원칙이 누락되었다고 생각됩니다.

나는 테이블이 (그리고이 경우에 적합), 각 셀은 텍스트 input 있습니다

그래서 여기에 시나리오입니다. 마지막 입력은 읽기 전용이며 해당 행에 입력 된 다른 값의 합계입니다. 나는 각 행의 합계와 각 행 합계의 총합을 찾기 위해 정말 지저분한 js 스크립트를 가지고있다.

<table> 
<thead> 
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Total</th></tr> 
</thead> 
<tbody> 
<tr id="row1"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row2"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row3"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
</tbody> 
</table> 

자바 스크립트 데이터가 입력 된 것을 확인합니다 단지 명확하게하는 수치입니다 :

다음은 기본적인 HTML입니다.

그래서 사용자가 데이터를 입력하고 다음 셀/입력으로 이동할 때 전체를 업데이트하는 onchange에 대한 각 입력에 대한 이벤트 리스너가 있습니다. 그런 다음 updateTotal이라는 함수가 있는데, 현재 for 개의 루프를 사용하여 각 행을 순환하고 각 셀을 반복하고 마지막으로 합계에 전체 셀의 입력을 설정합니다.

간략한주의 사항 : 아래에 코드를 포함하여 내가 손을 들어 보지 않고 내가 가지고있는 기본 논리를 보여줄 수 있음을 보여줍니다. 이 부분을 건너 뛰거나 건너 뛰어도 좋습니다. 그것은 작동하고 어떤 디버깅이나 비판도 필요하지 않습니다.

이처럼 그 모습입니다 :

function updateTotal() { 
    table = document.getElementsByTagName("tbody")[0]; 
    allrows = table.getElementsByTagName("tr"); 
    grandtotal = document.getElementById("grand"); 
    grandtotal.value = ""; 

    for (i = 0; i < allrows.length; i++) { 
     row_cells = allrows[i].getElementsByTagName("input"); 
     row_total = allrows[i].getElementsByTagName("input")[allrows.length - 2]; 
     row_total.value = ""; 

     for (ii = 0; ii < row_cells.length - 1; ii++) { 
      row_total.value = Number(row_total.value) + Number(row_cells[i][ii].value); 
      grandtotal.value = Number(grandtotal.value) + Number(row_cells[i][ii].value); 
     } 
    } 
} 

지금 나는 JQuery와 구문 위를 다시 쓰기 위해 노력하고 있어요,하지만 난 갇히지하고 있습니다. 내가 생각하는 방식으로 작동하지 않는 것

function findTotals() { 
$("tbody tr").each(function() { 
    row_total = 0; 
    $($(this) + " td:not(.total) input:text").each(function() { 
     row_total += Number($(this).val()); 
     }); 
    $($(this) + " .total :input:text").val(row_total); 
}); 

} 

그러나 $(this)을 사용 : 내가 갈 수있는 가장 좋은 방법은의 라인을 따라 each() 루프를 사용하는 것입니다 생각했다. 필자는 각 루프에서 $(this)의 사용이 각 일치 요소를 가리킨다는 것을 보았습니다. 이것은 예상 한 것이지만 each() 함수에서 그 요소를 통과하는 방법을 얻지 못합니다. 위의 코드는 또한 grand_total 비트를 제거합니다. 왜냐하면 저는 총합 변수를 얻는 것이 덜 효과적 이었기 때문입니다. 나는하여 row_totals를 얻기 위해 단지 다음과 같은 시도 : 일부 성공

$($(this).attr("id") + " td:not(.total) input:text").each(function() { 

,하지만 난 그것에에 추가하려고 할 때 다음 그것을 깰 수 있었다. 나는 각 부분이 내가 염두에두고있는 행을 가리켜 야하기 때문에이 행을하기 위해 각 행에 ID가 필요하다고 생각하지 않는다.

---

그래서이의 짧은 버전입니다 : 나는 경기 내에서 요소만을 통과하기 위해 각 루프를 사용하고, 만약 그렇다면, 올바른 구문은 무엇을 할 수 있습니까? 아니면 각 루프없이 원하는 것을 얻는 간단한 방법이 있습니까?

아, 마지막 생각은 ...

jquery를 사용하여 일치하는 모든 요소의 숫자 합계 (하나의 긴 문자열과 반대)를 얻을 수 있습니까? 나는 이것을 좀더 연구 할 것이지만 만약 누군가가 알고 있다면, 이것은 훨씬 더 쉽게 할 수있을 것이다.

Answer 1

이 시도 잘못 컨텍스트를 설정하려고 :

function findTotals() { 
    $("tbody tr").each(function() { 
     row_total = 0; 
     $("td:not(.total) input:text",this).each(function() { 
      row_total += Number($(this).val()); 
     }); 
     $(".total :input:text",this).val(row_total); 
    }); 

} 

를 컨텍스트에 대한 자세한 내용은 JQuery와 문서를 체크 아웃 : http://docs.jquery.com/Core/jQuery#expressioncontext는

Answer 2

선택기에 대한 두 개의 매개 변수가있을 수 있습니다. 두 번째 매개 변수는 검색을 수행 할 컨텍스트 htat입니다. 다음과 같이 입력하십시오. $ ('# tableID tbody tr) .each (function() { // 이제 테이블 행이므로 그냥 해당 행의 모든 ​​텍스트 상자를 검색합니다. sum 또는 기타 속성에 의해 css 클래스가 사용됩니다. $ ('input [type = text]', this) .each (function() { // 행의 모든 ​​textbosxes를 선택합니다. $ (this) .val()은 텍스트 상자의 값을 얻습니다. }); //이 함수 밖에서는 합계가 이 될 것입니다. // 행 합계 등을 얻기 위해 숨겨진 필드 또는 전역 변수에 추가하십시오. . });