Jquery implements the select row column summation example

  • 2020-03-30 02:45:08
  • OfStack

Jquery method
 
$( 
function () { 

//The total value of the staff statistics table is calculated when the page loads
calcSum(); 

}); 

//Total line calculation
 
function trVisible(chk, index) { 

var disValue = $("#Tr" + index).css("display"); 
if (chk.checked) { 

$("#Tr" + index).css("display", "block"); 
} 
else { 
$("#Tr" + index).css("display", "none"); 
} 
calcSum(); 
} 
function calcSum() { 

//The total row assigns an initial value of 0
$("#trSum").each(function () { 
$(this).find("td").each(function () { 
if ($(this).index() != 0) { 
$(this).text("0"); 
} 
}); 
}); 

$("#tabrytj").find("tr").each(function () { 
var trDis = $(this).css("display"); 
//Hidden rows do not participate in the calculation
if (trDis == "block") { 
$(this).find("td").each(function () { 
var index = $(this).index(); 
if (index >= 1) { 
var tdValue = $("#trSum").find("td:eq(" + index + ")").text(); 
//totalSum += parseFloat($(this).text()); 
$("#trSum").find("td:eq(" + index + ")").text(parseFloat(tdValue) + parseFloat($(this).text())); 
} 
}); 
} 
}); 


} 

The HTML statements
 
<table> 
<tr> 
<td> branch </td> 
<td> 
<select> 
<option> 
 South China branch  
</option> 
</select> 
</td> 
<td><input type="checkbox" onclick="trVisible(this,1)" name="chk1" id="chk1" checked="checked" /> zhang 1</td> 
<td><input type="checkbox" onclick="trVisible(this,2)" checked="checked" /> zhang 2</td> 
<td><input type="checkbox" onclick="trVisible(this,3)" checked="checked" /> zhang 3</td> 
<td><input type="checkbox" onclick="trVisible(this,4)" checked="checked" /> zhang 4</td> 
<td><input type="checkbox" onclick="trVisible(this,5)" checked="checked" /> zhang 5</td> 
<td><input type="checkbox" onclick="trVisible(this,6)" checked="checked" /> zhang 6</td> 
</tr> 
</table> 



<div> 
<table border="0" class="tableinfo" id="tabrytj"> 
<tr id="Tr1" style="display:block"> 
<td> zhang 1 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="Tr2" style="display:block"> 
<td> zhang 2 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="Tr3" style="display:block"> 
<td> zhang 23 </td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
<td>124536</td> 
</tr> 
<tr id="trSum"> 
<td></td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
<td>0</td> 
</tr> 
</table>
</div> 

Related articles: