Sử dụng jquery để lấy tổng số hàng và tổng số bảng lớn

Question

Vì vậy, phiên bản ngắn của điều này là: Tôi chỉ có thể duyệt qua các phần tử trong phần tử phù hợp của bộ chọn trước each() không? Hoặc là có một cách đơn giản hơn để nhận được những gì tôi muốn mà không cần một vòng lặp each()?

---

Tôi nghĩ điều này sẽ dễ dàng hơn nhiều, điều này khiến tôi nghĩ rằng tôi chỉ thiếu một số nguyên tắc cơ bản về yếu tố đi ngang qua với jquery.

Vì vậy, đây là kịch bản:

Tôi có một bảng (và nó là thích hợp trong trường hợp này), trong đó mỗi tế bào có một văn bản input. Đầu vào cuối cùng là chỉ đọc và được cho là tổng số các giá trị khác được nhập trên hàng đó. Tôi có một kịch bản js thực sự lộn xộn cho việc tìm kiếm cả hai tổng số của mỗi hàng và sau đó tổng cộng của tổng số hàng.

Đây là HTML cơ bản:

<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> 

Các javascript sẽ xác nhận rằng các dữ liệu nhập vào là số, chỉ để được rõ ràng.

Vì vậy, tôi có trình xử lý sự kiện cho mỗi đầu vào cho onchange cập nhật tổng số khi người dùng nhập dữ liệu và di chuyển đến ô/đầu vào tiếp theo. Sau đó, tôi có một hàm gọi là updateTotal hiện đang sử dụng các vòng lặp for lặp qua mỗi hàng và trong vòng lặp đó, mỗi ô và cuối cùng đặt đầu vào trong tổng ô để tính tổng.

Lưu ý nhanh: Tôi đã bao gồm mã dưới đây để cho thấy rằng tôi không chỉ tìm kiếm một bàn tay và để chứng minh logic cơ bản về những gì tôi có trong tâm trí. Vui lòng bỏ qua hoặc bỏ qua phần này. Nó hoạt động và không cần bất kỳ sửa lỗi hoặc phê bình nào.

Đây là những gì trông giống như:

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

Bây giờ tôi đang cố gắng để viết lại trên với cú pháp jquery, nhưng tôi đang bị mắc kẹt. Tôi nghĩ cách tốt nhất để đi sẽ được sử dụng each() vòng dọc theo dòng:

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

} 

Nhưng sử dụng $(this) dường như không làm việc theo cách tôi nghĩ. Tôi đọc và thấy rằng việc sử dụng $(this) trong mỗi vòng lặp trỏ đến từng phần tử phù hợp, đó là những gì tôi mong đợi, nhưng tôi không hiểu cách tôi có thể duyệt qua phần tử đó trong hàm each(). Ở trên cũng lá ra các bit grand_total, bởi vì tôi đã có ít may mắn hơn với nhận được tổng số biến lớn để làm việc. Tôi đã thử những điều sau đây chỉ để có được row_totals:

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

với một số thành công, nhưng sau đó quản lý để phá vỡ nó khi tôi thử thêm vào nó. Tôi sẽ không nghĩ rằng tôi cần mỗi hàng để có một id để làm cho công việc này, vì mỗi phần nên trỏ đến hàng tôi có trong tâm trí.

---

Vì vậy, phiên bản ngắn gọn của điều này là: Tôi có thể sử dụng mỗi vòng để chỉ duyệt các phần tử trong các kết quả phù hợp và cú pháp chính xác không? Hoặc là có một cách đơn giản hơn để có được những gì tôi muốn mà không có một vòng lặp?

Ồ, một ý nghĩ cuối cùng ...

Có thể lấy tổng số (trái ngược với một chuỗi dài) của tất cả các phần tử đã khớp với jquery không? Tôi sẽ nghiên cứu thêm về bản thân mình, nhưng nếu có ai biết, nó sẽ làm cho việc này trở nên dễ dàng hơn nhiều.

Answer 1

Bạn đang cố gắng để thiết lập ngữ cảnh của bạn không đúng cách thử này:

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

} 

Để biết thêm thông tin về bối cảnh kiểm tra các tài liệu jquery: http://docs.jquery.com/Core/jQuery#expressioncontext

Answer 2

Có thể có hai tham số cho một selector. Tham số thứ hai là ngữ cảnh htat mà tìm kiếm đang diễn ra. Hãy thử một cái gì đó như sau: $ ('# tableID tbody tr) .each (function() { // bây giờ đây là một hàng của bảng, vì vậy chỉ tìm kiếm tất cả các hộp văn bản trong hàng đó, có thể với một lớp css được gọi là tổng hoặc bởi một số thuộc tính khác $ ('input [type = text]', this) .each (function() { // select all textbosxes in the row . $ (this) .val() nhận giá trị của hộp văn bản, v.v. }); // bây giờ bên ngoài chức năng này, bạn sẽ có tổng số // thêm nó vào trường ẩn hoặc biến toàn cầu để lấy tổng số hàng, v.v. . });