Example of selecting rows and columns using jquery

Jquery Method
Copy codeThe Code is as follows:
$ (
Function (){

// Calculate the total value of the personnel statistical table during page loading
CalcSum ();

});

// Calculates the total number of rows.
/*
Aggregate behavior intermediate Variables
Add each cell to the total row of the column
Obtain the total number of columns.
*/
Function trVisible (chk, index ){

Var disValue = $ ("# Tr" + index.html .css ("display ");
If (chk. checked ){

$ ("# Tr" + index.html .css ("display", "block ");
}
Else {
$ ("# Tr" + index.html .css ("display", "none ");
}
CalcSum ();
}
Function calcSum (){

// The total row has 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 = require (this).css ("display ");
// Hide rows not involved in 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 ()));
}
});
}
});


}

Html statement
Copy codeThe Code is as follows:
<Table>
<Tr>
<Td> branch </td>
<Td>
<Select>
<Option>
China South Branch
</Option>
</Select>
</Td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 1) "name =" chk1 "id =" chk1 "checked =" checked "/> 1 </td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 2)" checked = "checked"/> 2 </td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 3)" checked = "checked"/> 3 </td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 4)" checked = "checked"/> figure 4 </td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 5)" checked = "checked"/> 5 </td>
<Td> <input type = "checkbox" onclick = "trVisible (this, 6)" checked = "checked"/> 6 </td>
</Tr>
</Table>



<Div>
<Table border = "0" class = "tableinfo" id = "tabrytj">
<Tr id = "Tr1" style = "display: block">
<Td> 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> 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>