Learn the fundamentals of jQuery Calx with simple calculations. Perfect for beginners to understand data-cell and data-formula attributes.
View Example →Explore how jQuery Calx handles different data types including numbers, text, dates, and booleans with automatic type conversion.
View Example →Build dynamic forms that add and remove rows on the fly while maintaining calculations across all elements.
View Example →Master value formatting with currency, percent, and number formatters. Includes input-mask behavior and conditional styling for negative values.
View Example →Work with multiple calculation sheets and reference cells across sheets using Sheet1!A1 notation.
View Example →Real-world complex example with PMT function, named variables, currency formatting, and amortization schedule. Perfect for understanding advanced calculations!
View Example →Explore complex formulas, named ranges, custom functions, and advanced calculation patterns for real-world applications.
View Example →Comprehensive test suite demonstrating various formulas, functions, and edge cases with expected results.
View Tests →Test automatic cell address assignment for elements with data-formula but no data-cell attribute.
View Test →Test the programmatic cell creation and manipulation API for building dynamic spreadsheets.
View Test →Support for 300+ functions including SUM, AVERAGE, IF, VLOOKUP, and more
Use A1, B2 notation or named variables like TAX, TOTAL in your formulas
Currency, percent, number formatting with intelligent input parsing
Apply CSS styles based on cell values (e.g., red for negative numbers)
Formulas recalculate automatically when dependent values change
Create workbooks with multiple sheets and cross-sheet references
<!-- Include jQuery and Calx -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dist/jquery.calx.js"></script>
<!-- Create a form with calculations -->
<form id="calculator">
<input data-cell="A1" value="100">
<input data-cell="A2" value="50">
<input data-formula="A1+A2" readonly>
</form>
<!-- Initialize Calx -->
<script>
$('#calculator').calx({ autoCalculate: true });
</script>data-var="TAX"data-style-if="negative" for red text on negative values