Using JavaScript, jQuery, XML, and XSL to bind a grid and automatically calculate column/row totals

This example uses JavaScript and a simple XSL transformation to bind XML data to a grid. The XSL transformation does the initial calculations for the rows and columns. There is also jQuery code to handle the blur() event on the textboxes to update the totals automatically.

Since we're using a client-side XSL transformation there is code to handle the XSL transform for browsers that support XSLTProcessor (e.g. Mozilla browsers), and there is an else statement to handle other browsers (e.g. Internet Explorer). It's also worth noting that since this example is in JSFiddle, if you're using Internet Explorer you won't be able to actually see the results since JSFiddle does not allow an ActiveXObject to be created. With that said, if you copy the example to your local testing environment it is cross-browser compatible.





Click here to view the demo and test the functionality.

Matt Pavey is a Microsoft Certified software developer who specializes in ASP.Net, VB.Net, C#, AJAX, LINQ, XML, XSL, Web Services, SQL, jQuery, and more. Follow on Twitter @matthewpavey