javascript - 过滤javascript后总和html表列

Question

当它从服务器端加载到我的 html 页面时，我使用此函数CalColumnHistDEPOSITO()对表列进行求和。但是当我应用过滤器时，它会连续对整个表格求和，而忽略过滤器。

(function() {
	'use strict';

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
                CalColumnHistDEPOSITO();
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       //console.log(text);
      var val = input.value.toLowerCase();
      //console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
          
				});
			}
		};
 
	})();

  /*console.log(document.readyState);
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
      console.log(document.readyState);
			TableFilter.init();
		}
	}); */
  
 TableFilter.init(); 
})();




 function CalColumnHistDEPOSITO() {
            var table = document.getElementById("VendasHistoryTable"); 
            // var table = document.querySelectorAll("#table1 tr td:first-child");
            var sumVal = 0;
            for(var i = 1; i < table.rows.length; i++)
            sumVal = sumVal + parseFloat(table.rows[i].cells[3].innerHTML);
            document.getElementById("Tprice").innerHTML = sumVal.toFixed(2);
  
     } 

/*DARK BACKGROWND ROWS 3D EFFECT*/
  .dark3Dtable{/*CENTER TABLE*/
	 margin-left:auto; 
     margin-right:auto;
     
	}
    
  

       .dark3Dtable tr:nth-child(even) {
       background: linear-gradient(180deg, #364e63, #121a21 70%);
       
       }
      .dark3Dtable tr:nth-child(odd) {
      background: linear-gradient(180deg, #364e63, #121a21 70%)
      }

      .dark3Dtable tbody{
   
  overflow:auto;
  height:300px;

}


	/* Define the default color for all the table rows */
	.dark3Dtable tr{
         color: white;
		 transition:all .25s ease-in-out
	}
 
	/* Define the hover highlight color for the table row */
    .dark3Dtable tr:hover {
    
           cursor: pointer;
            color: #000;
           /* text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;*/
            
          	background-color: #111;
	background-image: linear-gradient(180deg,  #000, #fff  40%, #000);
            }
            
     
    .dark3Dtable th{
    background: linear-gradient(180deg, #364e63, #121a21 70%, #364e63);
            background-color: white;
            color: white;
            }
    .dark3Dtable th:hover{
            color: white;
            }
 

<section class="container">
  <h2>Vanilla JS Table filter</h2>
  <input type="text" class="table-filter" data-table="order-table" placeholder="Item to filter.." />


 <strong> sum of column 4 PRICE: $ <span id="Tprice"></span></strong>
<br>
  <table id="VendasHistoryTable" class="order-table table dark3Dtable">
        <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
           <th>date</th>
      </tr>
        </thead>

      <tr>
        <td>John Doe</td>
        <td>[e-mail]</td>
        <td>0123456789</td>
        <td>99.80</td>
        <td>15/02/2020</td>
      </tr>

      <tr>
        <td>Jane Vanda</td>
        <td>[e-mail]</td>
        <td>9876543210</td>
        <td>349.51</td>
        <td>19/02/2020</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>[e-mail]</td>
        <td>6754328901</td>
        <td>199.50</td>
        <td>18/05/2020</td>
      </tr>
          <tr>
        <td>Alferd Penyworth</td>
        <td>[e-mail]</td>
        <td>6754328901</td>
        <td>199.00</td>
        <td>25/05/2020</td>
      </tr>

  </table>

</section>

我应该对函数 CalColumnHistDEPOSITO() 进行什么修改以使其反映我的过滤器？先感谢您！

标签： javascripthtml

Answer 1

您需要更新 for 循环中的行，CalColumnHistDEPOSITO()如下所示。因为您拥有的过滤器只是为了隐藏它们。它们仍然是 DOM 的一部分。在计算过程中，您需要根据样式显示属性是否排除table-row它们

for(var i = 1; i < table.rows.length; i++){
  var row = table.rows[i];
  if(row.style.display == 'table-row')
    sumVal = sumVal + parseFloat(row.cells[3].innerHTML);
}

(function() {
	'use strict';

var TableFilter = (function() {
 var Arr = Array.prototype;
		var input;
  
		function onInputEvent(e) {
			input = e.target;
			var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
			Arr.forEach.call(table1, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, filter);
                CalColumnHistDEPOSITO();
				});
			});
		}

		function filter(row) {
			var text = row.textContent.toLowerCase();
       //console.log(text);
      var val = input.value.toLowerCase();
      //console.log(val);
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = onInputEvent;
          
				});
			}
		};
 
	})();

  /*console.log(document.readyState);
	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
      console.log(document.readyState);
			TableFilter.init();
		}
	}); */
  
 TableFilter.init(); 
})();




 function CalColumnHistDEPOSITO() {
            var table = document.getElementById("VendasHistoryTable"); 
            // var table = document.querySelectorAll("#table1 tr td:first-child");
            var sumVal = 0;
            for(var i = 1; i < table.rows.length; i++){
            var row = table.rows[i];
            if(row.style.display == 'table-row')
            sumVal = sumVal + parseFloat(row.cells[3].innerHTML);
            }
            document.getElementById("Tprice").innerHTML = sumVal.toFixed(2);
  
     }

/*DARK BACKGROWND ROWS 3D EFFECT*/
  .dark3Dtable{/*CENTER TABLE*/
	 margin-left:auto; 
     margin-right:auto;
     
	}
    
  

       .dark3Dtable tr:nth-child(even) {
       background: linear-gradient(180deg, #364e63, #121a21 70%);
       
       }
      .dark3Dtable tr:nth-child(odd) {
      background: linear-gradient(180deg, #364e63, #121a21 70%)
      }

      .dark3Dtable tbody{
   
  overflow:auto;
  height:300px;

}


	/* Define the default color for all the table rows */
	.dark3Dtable tr{
         color: white;
		 transition:all .25s ease-in-out
	}
 
	/* Define the hover highlight color for the table row */
    .dark3Dtable tr:hover {
    
           cursor: pointer;
            color: #000;
           /* text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;*/
            
          	background-color: #111;
	background-image: linear-gradient(180deg,  #000, #fff  40%, #000);
            }
            
     
    .dark3Dtable th{
    background: linear-gradient(180deg, #364e63, #121a21 70%, #364e63);
            background-color: white;
            color: white;
            }
    .dark3Dtable th:hover{
            color: white;
            }

<section class="container">
  <h2>Vanilla JS Table filter</h2>
  <input type="text" class="table-filter" data-table="order-table" placeholder="Item to filter.." />


 <strong> sum of column 4 PRICE: $ <span id="Tprice"></span></strong>
<br>
  <table id="VendasHistoryTable" class="order-table table dark3Dtable">
        <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
           <th>date</th>
      </tr>
        </thead>

      <tr>
        <td>John Doe</td>
        <td>[e-mail]</td>
        <td>0123456789</td>
        <td>99.80</td>
        <td>15/02/2020</td>
      </tr>

      <tr>
        <td>Jane Vanda</td>
        <td>[e-mail]</td>
        <td>9876543210</td>
        <td>349.51</td>
        <td>19/02/2020</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>[e-mail]</td>
        <td>6754328901</td>
        <td>199.50</td>
        <td>18/05/2020</td>
      </tr>
          <tr>
        <td>Alferd Penyworth</td>
        <td>[e-mail]</td>
        <td>6754328901</td>
        <td>199.00</td>
        <td>25/05/2020</td>
      </tr>

  </table>

</section>