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

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']);

Fetching and Setting Field Values

// Set them on initialisation
jQuery('#tabular').tabularInput({
	'rows': 3,
	'columns': 3,
	'name': 'myField'
});

// Fetch value of first column, in the third row
jQuery('[name="myField[0][2]"]').val();

// Set value of second column, in the third row
jQuery('[name="myField[1][2]"]').val('JavaScript');