Question

我正在尝试修改此代码，以在过滤后计算表格的最后6列。到目前为止，它仅计算class="countable"，但我需要每列的独立总和。有人可以引导我朝正确的方向吗？

function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    table = document.getElementById("displaytable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";           
        }
    }
    var cls = document.getElementById("displaytable").getElementsByTagName("td");
    var sum = 0;
    for (var i = 0; i < cls.length; i++){
        if(cls[i].className == "countable" && cls[i].closest("tr").style.display != "none"){
        sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
        }
    }   
    document.getElementById('total').innerHTML = sum;

}
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
    if(cls[i].className == "countable"){
    sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
    }
}   
document.getElementById('total').innerHTML += sum;

<!DOCTYPE html><html lang='en' class=''>

  <style id="compiled-css" type="text/css">

table {
  border-collapse: collapse;
  width: 100%;
 
}

td,th
{
    text-align:left;
    padding: 1px;
  border:1px solid silver;
}

#right, td + td, th + th
{
    text-align:center;
}


th {
  border-bottom: 1px solid silver;
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #236192;
  color: white;
 
}

tr:nth-child(even):hover, tr:nth-child(odd):hover{
  background-color: #FEF200;
  color: black;
  style="font-family:arial;

}


tr:nth-child(even) {background-color: #f2f2f2;}
tr:nth-child(odd) {background-color: white;}
}


  </style>


  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">


    window.onload=function(){
      


    }

</script></head><body>
<!DOCTYPE html>
<html>
	<head>

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
	</head>


<body>

<input type="text" id="search" onkeyup='searchTable()' placeholder="Type to Search">

<table>
<thead>

<tr>
      <th rowspan="2"><Center>Policy</Center></th>
      <th colspan="2"><Center>2016</Center></th>
      <th colspan="2"><Center>2017</Center></th>
      <th colspan="2"><Center>2018</Center></th>
      
    </tr>

<tr>

    <th ><Center>Count</Center></th>
     <th ><Center>Average Cost</Center></th>
    <th ><Center>Count</Center></th>
     <th ><Center>Average Cost</Center></th>
    <th ><Center>Count</Center></th>
     <th ><Center>Average Cost</Center></th>
	</tr>
</thead>

<tbody id="displaytable">

<tr><td>	Policy 1	</td><td class="countable">	3	</td><td class="countable">	$3,113	</td><td class="countable">	0	</td><td class="countable">	$0	</td><td class="countable">	0	</td><td class="countable">	$0	</td></tr>
<tr><td>	Policy 2	</td><td class="countable">	96	</td><td class="countable">	$14,458	</td><td class="countable">	64	</td><td class="countable">	$15,204	</td><td class="countable">	61	</td><td class="countable">	$14,962	</td></tr>
<tr><td>	Policy 3	</td><td class="countable">	1	</td><td class="countable">	$12,817	</td><td class="countable">	11	</td><td class="countable">	$11,822	</td><td class="countable">	3	</td><td class="countable">	$14,763	</td></tr>
<tr><td>	Policy 4	</td><td class="countable">	1	</td><td class="countable">	$160,727	</td><td class="countable">	0	</td><td class="countable">	$0	</td><td class="countable">	0	</td><td class="countable">	$0	</td></tr>
<tr><td>	Policy 5	</td><td class="countable">	7	</td><td class="countable">	$47,724	</td><td class="countable">	28	</td><td class="countable">	$41,880	</td><td class="countable">	15	</td><td class="countable">	$37,265	</td></tr>
<tr><td>	Policy 6	</td><td class="countable">	1	</td><td class="countable">	$56,449	</td><td class="countable">	1	</td><td class="countable">	$57,110	</td><td class="countable">	1	</td><td class="countable">	$57,014	</td></tr>
<tr><td>	Policy 7	</td><td class="countable">	14	</td><td class="countable">	$147,051	</td><td class="countable">	25	</td><td class="countable">	$144,257	</td><td class="countable">	32	</td><td class="countable">	$135,434	</td></tr>
<tr><td>	Policy 8	</td><td class="countable">	12	</td><td class="countable">	$162,434	</td><td class="countable">	23	</td><td class="countable">	$153,982	</td><td class="countable">	27	</td><td class="countable">	$150,775	</td></tr>
<tr><td>	Policy 9	</td><td class="countable">	2	</td><td class="countable">	$54,754	</td><td class="countable">	2	</td><td class="countable">	$32,417	</td><td class="countable">	5	</td><td class="countable">	$52,597	</td></tr>
<tr><td>	Policy 10	</td><td class="countable">	0	</td><td class="countable">	$0	</td><td class="countable">	20	</td><td class="countable">	$168,676	</td><td class="countable">	43	</td><td class="countable">	$161,504	</td></tr>




		</tbody>
        
	<tfoot class="shown">
        <tr>
            <td style="text-align:right">Total = </td>
            <td id="total"></td>
            <td id="total"></td>
            <td id="total"></td>
            <td id="total"></td>
            <td id="total"></td>
            <td id="total"></td>
        </tr>
    </tfoot>
</table>

计算HTML表中最后6个过滤列的总和

0 个答案: