Add a summary row for the gridview using JavaScript in Asp.net

The method for adding column summary to the gridview is rich, but there are almost two client-side operations and server-side operations.

I often use client operations. For convenience, I use jquery to write code.

For example, we have such a data grid,

Now we want to add a summary row below to calculate the number of students and the total bonus.

First, calculate the total number of persons as follows:

Function getpersons () <br/>{< br/> var Total = 0.00; <br/> // calculates the total number of data rows, remove the header line <br/> total =$ ('# gridview1 '). find ('tr '). length-1; <br/> return total; <br/>}

Then we calculate the total bonus:

Function gettotal () <br/>{< br/> var Total = 0; <br/> $ ('# gridview1 '). find ('tr '). each (function () {<br/> // calculate the number of cells in the third column (bonus) <br/> $ (this ). find ('td: eq (3 )'). each (function () {<br/> var tempvar = $. trim ($ (this ). ATTR ("innerhtml"); <br/> If (tempvar) {<br/> total + = ~~ Tempvar; <br/>}< br/>}); <br/> return total; <br/>}

If the value is the template column Textbox (or other controls), we can

VaR tempvar = $. Trim ($ (this). ATTR ("innerhtml "));

Change

VaR tempvar = $ (this). Find ('input'). Val ();

In this way, the data in the control can be retrieved.

Now, we can add a summary row for gridview1,

Function createrow () <br/>{< br/> var pers = getpersons (); <br/> var Total = gettotal (); <br/> $ ('# gridview1 '). append ("<tr style =" background-color: # b3d9ff; "mce_style =" background-color: # b3d9ff; "> <TD style =" color: red; "mce_style =" color: red; "> total" + pers + "People </TD> <TD> ￥" + total + "</TD> </tr> "); <br/>}

Of course, you can customize the style of the newly added rows and add multiple rows to meet your needs. For example, you can add another row and calculate the average bonus.

Finally, we call the createrow method when page Dom loading is complete.

$ (Document). Ready (function () {<br/> createrow (); <br/> });

This completes the addition of our summary rows. Here we mainly operate the table. In fact, we want to parse it into a table control or a table. We can also perform operations in a similar way.