TableEditor

Flexible in place editing of TableSorter


NEW ROW EXAMPLE

« Back to main page

This example demonstrates how trivial it is to add a new row to the table. You can pass in options designating a class for the new row, the key, cell values, whether it should inherit these values, and the table the row should be added to.

Using a unique KEY for the new row (0 by default) will allow your data source updater to ADD vs. UPDATE the row. The datasource updater is likely an ajax submit defined in your FUNC_UPDATE.



Email First Name Last Name Age Chicago

1

hates.spam@iceburg.net Brice Burgess 26 Bears

2

hurricane@ditka Mike Ditka 62 Francheesi

3

berghoff@gone.com Berghoff 99 Free Bacon

4

jazz@mpark.com Mill Green 67 Organ

5

marina towers is bueno River

2020

Iam FormMan

SOURCE

<script type="text/javascript">
$().ready(function() {	
	$("#editableTable").tableSorter({ 
		sortClassAsc: 'ASC', 		// class name for ascending sorting action to header
		sortClassDesc: 'DESC',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 0 
	}).tableEditor({
		SAVE_HTML: '',
		EDIT_HTML: '',
		EVENT_LINK_SELECTOR: 'button.edit',
		COL_APPLYCLASS: true,
		ROW_KEY_SELECTOR: 'p.key',
		FUNC_POST_EDIT: 'postEdit'
	});
	
	$('#addNew').click(function() {
		var options = {
			CLASS: 'newRow', 
			VALUES: {
				email: 'auto@populated.com',
				chicago: 'bearsch'
			}
		};
		jQuery.tableEditor.lib.appendRow(options);
	});
	
	$('#addCopy').click(function() {
		var options = {
			KEY: -1,
			COPY: true
		};
		jQuery.tableEditor.lib.appendRow(options);
	});
});

// inject validation
function postEdit(o) {
	var inputSelector = 'input.pvV';
	var submitSelector = '../td button.edit'
	
	PommoValidate.reset();
	PommoValidate.init(inputSelector, submitSelector, true, o.row);
}
</script>


(c) 2006 - Brice Burgess