// format String.prototype.format = function () { var args = arguments; return this.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }; // format number with commas and decimal Number.prototype.numberFormat = function (decimals, dec_point, thousands_sep) { dec_point = typeof dec_point !== 'undefined' ? dec_point : '.'; thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ''; var parts = this.toFixed(decimals).split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep); return parts.join(dec_point); }; // initialize $(function () { // bind data BindData(); // events $(".amount").blur(function () { // variables var row = $(this).attr("data-row"); var column = $(this).attr("data-column"); var selectorRow = ".total{0}".format(row); var selectorColumn = ".{0}".format(column); var selectorAll = ".amount"; var lblTotalRow = $("#lbl-total-{0}".format(row)); var lblTotalColumn = $("#lbl-total-{0}".format(column)); var lblTotalAll = $("#lbl-total-sum"); var totalRow = 0; var totalColumn = 0; var totalAll = 0; // format number $(this).val(parseFloat($(this).val().replace(/[^0-9$.,]/g, '').replace(/,/g, '').replace(/\$/g, '')).numberFormat(2)); // get value var amount = $(this).val(); // make sure we still have a valid number if (amount == 'NaN' || amount == NaN) { $(this).val('0.00'); } // calculate total for this row $(selectorRow).each(function () { totalRow += Number($(this).val()); }); // calculate total for this column $(selectorColumn).each(function () { totalColumn += Number($(this).val()); }); // calculate total for all amounts $(selectorAll).each(function () { totalAll += Number($(this).val()); }); // bind labels lblTotalRow.text(totalRow.numberFormat(2, '.', ',')); lblTotalColumn.text(totalColumn.numberFormat(2, '.', ',')); lblTotalAll.text(totalAll.numberFormat(2, '.', ',')); }); }); // methods function BindData() { // variables var xmlDoc; var xslDoc; var xslTemplate; var xslProcessor; var xslFragment; var SortExpression = "id"; var SortDirection = "ascending"; var SortType = "number"; // get reference to xml data and xsl data var XmlData = document.getElementById("xml").textContent; var XslData = document.getElementById("xsl").textContent; // get reference to output div var pnlResults = $("#pnlResults"); // check for window.XSLTProcessor which would indicate Firefox, Chrome, etc // if no window.XSLTProcessor then fall back to IE if (window.XSLTProcessor) { // Firefox, Chrome, etc // instantiate and load the xml document xmlDoc = new DOMParser().parseFromString(XmlData, "text/xml"); // instantiate and load the xsl document xslDoc = new DOMParser().parseFromString(XslData, "text/xml"); // instantiate the document processor and submit the xsl document xslProcessor = new XSLTProcessor(); xslProcessor.importStylesheet(xslDoc); // add parameters to the xsl document xslProcessor.setParameter(null, "SortExpression", SortExpression); xslProcessor.setParameter(null, "SortDirection", SortDirection); xslProcessor.setParameter(null, "SortType", SortType); // transform xml with xsl xslFragment = xslProcessor.transformToFragment(xmlDoc, document); // output to target pnlResults.empty().append(xslFragment); } else { // IE pnlResults.empty().append("This code works in Internet Explorer; however, ActiveXObject is not supported in JSFiddle."); return; // instantiate and load the xml document xmlDoc = new ActiveXObject("MSXML2.DOMDocument"); xmlDoc.loadXML(XmlData); // instantiate and load the xsl document xslDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); xslDoc.loadXML(XslData); // prepare the xsl document for transformation xslTemplate = new ActiveXObject("MSXML2.XSLTemplate"); xslTemplate.stylesheet = xslDoc; // instantiate the document processor and submit the xml document xslProcessor = xslTemplate.createProcessor(); xslProcessor.input = xmlDoc; // add parameters to the xsl document xslProcessor.addParameter("SortExpression", SortExpression, ""); xslProcessor.addParameter("SortDirection", SortDirection, ""); xslProcessor.addParameter("SortType", SortType, ""); // transform xml with xsl xslProcessor.transform(); // output to target pnlResults.empty().append(xslProcessor.output); } }