JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<script src="http://www.pengoworks.com/workshop/jquery/field/jquery.field.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>
<h1 style="margin-top: 0;">
    Calculation Plug-in w/Euro Formatting
</h1>
<table width="100%">
    <col style="width: 50px;" />
    <col />
    <col style="width: 60px;" />
    <col style="width: 110px;" />
    <tr>
        <th>
            Qty
        </th>

        <th align="left">
            Product
        </th>
        <th>
            Price
        </th>
        <th>
            Total
        </th>
    </tr>

    <tr>
        <td align="center">
            <input type="text" name="qty_item_1" id="qty_item_1" value="100" size="2" />
        </td>
        <td>
            <a href="http://www.packtpub.com/jQuery/book">Learning jQuery</a>
        </td>
        <td align="center" id="price_item_1">

            $39,99
        </td>
        <td align="center" id="total_item_1">
            $39,99
        </td>
    </tr>
    <tr>
        <td align="center">
            <input type="text" name="qty_item_2" id="qty_item_2" value="2" size="2" />
        </td>

        <td>
            <a href="http://jquery.com/">jQuery Donation</a>
        </td>
        <td align="center" id="price_item_2">
            $14,99
        </td>
        <td align="center" id="total_item_2">
            $14,99
        </td>

    </tr>
    <tr>
        <td colspan="3" align="right">
            <strong>Grand Total:</strong>
        </td>
        <td align="center" id="grandTotal">
        </td>
    </tr>

</table>

JavaScript

$.Calculation.setDefaults({
    // a regular expression for detecting European-style formatted numbers
    reNumbers: /(-?\$?)(\d+(\.\d{3})*(,\d{1,})?|,\d{1,})/g
    // define a procedure to convert the string number into an actual usable number
    , cleanseNumber: function (v){
        // cleanse the number one more time to remove extra data (like commas and dollar signs)
        // use this for European numbers: v.replace(/[^0-9,\-]/g, "").replace(/,/g, ".")
        return v.replace(/[^0-9,\-]/g, "").replace(/,/g, ".");
    }
});

jQuery(function($){
  
    // bind the recalc function to the quantity fields
    $("input[name^=qty_item_]").bind("keyup", recalc);
    // run the calculation function now
    recalc();

});

function formatMoney(n, c, d, t){
    var c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };


function recalc(){
    $("[id^=total_item]").calc(
        // the equation to use for the calculation
        "qty * price",
        // define the variables used in the equation, these can be a jQuery object
        {
            qty: $("input[name^=qty_item_]"),
            price: $("[id^=price_item_]")
        },
        // define the formatting callback, the results of the calculation are passed to this function
        function (s){
            // return the number as a dollar amount
            return "$" + formatMoney(s, 2, ",", ".");
        },
        // define the finish callback, this runs after the calculation has been complete
        function ($this){
            // sum the total of the $("[id^=total_item]") selector
            var sum = $this.sum();

            $("#grandTotal").text(
                // round the results to 2 digits
 ...