Tabular Input Fields

Files <script src='tabular-input.min.js'></script> (4.1 KB) <link type='text/css' rel='stylesheet' href='tabular-input.min.css'/> (2 KB)

Simple Usage jQuery('#tabular').tabularInput({ 'rows': 3, 'columns': 5 });

Add / Delete Row Button Add New Row Delete Last Row Add New Column Delete Last Column jQuery('#tabular').tabularInput({ 'rows': 3, 'columns': 5, 'animate': true }); $("#tabular").tabularInput("addRow"); // Add a row at the end $("#tabular").tabularInput("deleteRow"); // Delete the last row $("#tabular").tabularInput("deleteRow", 2); // Delete row at index 2 $("#tabular").tabularInput("addColumn"); // Add a column at the end $("#tabular").tabularInput("deleteColumn"); // Delete the last column

Add Row on Tab Move to the last cell and press Tab jQuery('#tabular').tabularInput({ 'rows': 3, 'columns': 5, 'newRowOnTab': true, 'maxRows': 6, 'animate': true });

Column Heads // Set them on initialisation jQuery('#tabular').tabularInput({ 'rows': 3, 'columns': 3, 'columnHeads': ['Name', 'Age', 'Sex', 'Occupation'] }); // Or later jQuery('#tabular').tabularInput('setColumnHeads', ['Name', 'Age', 'Sex', 'Occupation']);