Hướng dẫn how do i sum a column in javascript? - làm cách nào để tính tổng một cột trong javascript?

Ví dụ về JavaScript: Tổng cộng một cột trong Tablephill Conrad cho CISC474, Mùa xuân 2006 Phill Conrad for CISC474, Spring 2006

Một bảng có tổng số ở hàng dưới cùng

Bảng dưới đây chứa một nhật ký đi bộ liên tục được lên kế hoạch và dặm thực tế đã đi bộ. Ý tưởng ở đây là chúng tôi muốn có thể nhập dữ liệu mới vào bảng và tự động cập nhật hàng dưới cùng. Chúng tôi muốn chức năng tổng thể đủ mạnh mẽ để xử lý các ô trống (ví dụ: các tế bào trong bảng bên dưới mà chúng tôi chưa điền vào ".).

Làm thế nào chúng tôi làm điều đó

Chúng tôi sẽ tiến hành từng bước:

1. Viết một hàm sơ khai JavaScript gọi là FinishTable (); Điều đó chạy khi trang tải. Chúng tôi sẽ thêm một biến cho phép chúng tôi bật và tắt "gỡ lỗi". Khi gỡ lỗi được bật, chúng tôi sẽ sử dụng các hộp cảnh báo để đảm bảo rằng tập lệnh đang hoạt động chính xác. Khi gỡ lỗi tắt, kịch bản sẽ chỉ cần làm công việc của mình một cách âm thầm.
2. Xác định cách "tìm" các yếu tố của cột trong bảng chúng tôi quan tâm. Lúc đầu, chúng tôi sẽ chỉ in chúng ra một hộp cảnh báo chỉ xuất hiện khi gỡ lỗi được bật.
3. Khi chúng tôi đã "tìm thấy" các phần tử, chúng tôi sẽ tìm thấy tổng của các yếu tố đó và hiển thị tổng trong hộp cảnh báo.
4. Cuối cùng, chúng tôi lấy số tiền đó và đặt nó vào hàng dưới cùng của bảng.

Bước 1: Chức năng sơ khai JavaScript chạy khi trang tải.

Trong bước này, chúng tôi chỉ cần thêm một chức năng sơ khai sẽ chạy ngay khi tải trang. Trong các bước sau, chúng tôi sẽ điền vào chức năng đó bằng mã để thực hiện công việc của chúng tôi.

1. Chúng tôi bắt đầu bằng cách thêm một phần tử

   
   var debugScript = true;
   		
   		

   1 bên trong phần tử

   
   var debugScript = true;
   		
   		

   2.

2. Chúng tôi thêm một biến toàn cầu

   
   var debugScript = true;
   		
   		

   3 để chúng tôi có thể bật và tắt gỡ lỗi. Bây giờ, chúng tôi bật nó lên.

   . Chúng rất hiếm, nhưng đây là một trong số đó.)

   
   var debugScript = true;
   		
   		

   Chúng tôi cũng thêm một hỗn hợp đặc biệt của các khung nhận xét XHTML và JavaScript, để ẩn JavaScript khỏi các trình phân tích cú pháp XHTML. Bạn sẽ thấy mẫu này trong rất nhiều trang JavaScript. Một số nguồn hiện đang tư vấn sử dụng các phần CDATA thay thế, về mặt lý thuyết là cách "thích hợp" để xử lý việc này. Tuy nhiên, tôi đã gặp rắc rối với phương thức CDATA trên một số trình duyệt. Có lẽ tại một thời điểm nào đó trong các phần CDATA trong tương lai sẽ trở thành cách tốt nhất để làm điều này, nhưng bây giờ, khung nhận xét dường như là cách tốt nhất để đi.

3. Thêm một hàm sơ khai đơn giản gọi là

   
   var debugScript = true;
   		
   		

   4, hiện tại, chỉ cần in một hộp cảnh báo cho chúng tôi biết rằng chức năng đang chạy mà chỉ khi DebugScript là đúng.

4. Thêm trình xử lý sự kiện

   
   var debugScript = true;
   		
   		

   5 trên thẻ

   
   var debugScript = true;
   		
   		

   6 để gọi tập lệnh của chúng tôi khi trang tải:

5. Kiểm tra trang của chúng tôi bằng cách đảm bảo rằng khi chúng tôi tải trang, chúng tôi sẽ thấy hộp cảnh báo.

Bước 2: Tìm các yếu tố trong bảng

Trong bước này, chúng tôi chỉ chỉ ra cách định vị dữ liệu trong bảng mà chúng tôi muốn tìm tổng. Đây là cách chúng tôi tiến hành:

1. Để phù hợp với cách các bảng mô hình đối tượng tài liệu (DOM), hãy chắc chắn rằng chúng tôi có phần tử

   
   var debugScript = true;
   		
   		

   7 bên trong phần tử

   
   var debugScript = true;
   		
   		

   8 của chúng tôi và các phần tử

   
   var debugScript = true;
   		
   		

   9 mà chúng tôi đang tìm kiếm nằm trong phần tử

   
   var debugScript = true;
   		
   		

   7 đó. Phần tử

   
   var debugScript = true;
   		
   		

   7 này dường như không quan trọng từ quan điểm làm cho bảng hiển thị chính xác hoặc xác thực là XHTML & NBSP; 1.1, nhưng DOM dường như muốn nó ở đó.

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   ...
    
   
       Hikes
   
       
         
   Locations
         
    Date 
         
   Miles (planned)
         
   Miles (actual)
         
   Comment
       
       
         
   Alapocas Woods 
         
   02/18/06
         
   1
         
   1
         
   busy that day; only time for a short hike 
       
   

2. Sau đó, đảm bảo trang xác thực là XHTML & NBSP; 1.1 hợp lệ. .

3. Bây giờ thêm một dòng javascript bên trong hàm hoàn thiện () của chúng tôi để tìm bảng chúng tôi quan tâm. Có một số cách để làm điều này, nhưng dễ nhất là đặt thuộc tính ID trên thẻ mở bảng và sử dụng getEuityByid:

   	  // this next line goes inside the finishTable() function
   	  var tableElem = window.document.getElementById("hikeTable"); 
   	  ...
      
   	  
   Đặt dòng tìm thấy phần tử bảng vào khối thử/bắt. Bằng cách này, nếu chúng ta phạm sai lầm, chúng ta có thể tìm thấy nó dễ dàng hơn.
    Như một ví dụ về một sai lầm mà chúng tôi có thể mắc phải, hãy xem xét điều gì sẽ xảy ra nếu chúng tôi viết 
   
   
   		
   	
   2 trong XHTML của chúng tôi và sau đó đã thực hiện một mã JavaScript của chúng tôi, đã không còn chữ hoa so với chữ thường. Hãy thử một lần để xem khối thử/bắt dưới đây sẽ giúp chúng tôi tìm thấy lỗi như thế nào.
   function finishTable()
   {
      if (debugScript)
         window.alert("Beginning of function finishTable");
   		
      try
      {
         var tableElem = window.document.getElementById("hikeTable"); 		
      }
      catch (ex)
      {
         window.alert("Error in finishTable()\n" + ex);
      }
   		
      return;
   }
   Một điều quan trọng cần lưu ý là JavaScript không có phạm vi khối. Nghĩa là, biến 
   
   
   		
   	
   4, được khai báo bên trong khối 
   
   
   		
   	
   5 ở trên được biết đến trong toàn bộ hàm, không chỉ bên trong niềng răng phân định khối thử. Đây là một sự khác biệt quan trọng giữa JavaScript và những gì bạn có thể được sử dụng từ c, & nbsp; c ++, & nbsp; và/hoặc & nbsp; java.
   Để biết thêm về khía cạnh quan trọng này của phạm vi trong JavaScript, hãy xem CISC474 & NBSP; Reading & NBSP; Ghi chú cho Phần & NBSP; 4.9.2 trong Sebesta.
   Traverse tất cả các hàng trong bảng (ngoại trừ các hàng trên và dưới). Để làm điều này, trước tiên chúng tôi nhận được một tham chiếu đến phần tử TBOD, sau đó xác định số lượng hàng trong bảng. Chúng ta có thể lặp lại trên các hàng này với một vòng đơn giản. Kết quả phải là một loạt các hộp cảnh báo hiển thị cho chúng ta các giá trị trong cột "dặm (kế hoạch)" của bảng, đó là cột & nbsp; 2, mới các số cột bắt đầu từ 0, không phải từ 1).
   
   
   
   var tableBody = tableElem.getElementsByTagName("tbody").item(0);
   var i;
   var whichColumn = 2; // which column in the table has what we want
   var howManyRows = tableBody.rows.length;
   for (i=1; i<(howManyRows-1); i++) // skip first and last row (hence i=1, and howManyRows-1)
   {
   	  var thisTrElem = tableBody.rows[i];
   	  var thisTdElem = thisTrElem.cells[whichColumn];			
      var thisTextNode = thisTdElem.childNodes.item(0);
      if (debugScript)
   	    {
   		  window.alert("text is " + thisTextNode.data);
   		} // end if
   } // end for
   Một hướng dẫn từ Trung tâm Nhà phát triển Mozilla có tiêu đề Đi qua bảng HTML với các giao diện JavaScript và DOM có thể hữu ích để hiểu các bước trong phần này chi tiết hơn.
   Bước 3: Tìm tổng của các yếu tố
   Bây giờ chúng tôi đã chỉ ra rằng chúng tôi có thể tìm thấy các ô bảng mà chúng tôi quan tâm, bây giờ chúng tôi chỉ ra cách thêm chúng lên.Trong bước này, chúng tôi cũng tái cấu trúc mã để chúng tôi có thể sử dụng lại giải pháp của mình để tìm tổng của bất kỳ cột nào trong bảng.
   Chúng tôi cho rằng người đọc, cho đến bây giờ, hiểu được cách thức hoạt động của JavaScript, vì vậy chúng tôi chỉ hiển thị giải pháp hoàn thành từ bước này.
   	 
   Bước 4: Viết tổng vào hàng dưới cùng của bảng
   Phần cuối cùng là phần đơn giản nhất, nó được thực hiện bằng một ứng dụng đơn giản các kỹ thuật HTML động.Kỹ thuật này được giải thích chi tiết trong các chủ đề tệp/javascript/dynhtml/dynhtml.html, vì vậy ở đây chúng tôi sẽ chỉ trình bày mã cuối cùng.Chỉ hàm hoàn thiện () thay đổi từ mã trong bước trước:
   
   var debugScript = true;
   		
   		
   0
   Đọc tiếp
   
   
   
   
   
   
   
   
   programming
   javascript
   Html sum
   Js sum column
   Sum table jQuery
   
   
   
   Reply
   7
   0
    Chia sẻ