JQuery插件：TableEditor试用

JQuery插件：TableEditor试用

这个插件在JQuery1.5.1版下无法使用。

项目地址：http://dev.iceburg.net/jquery/tableEditor/demo.php

html文件：

html<table id="editableTable" border="0" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th name="ID">ID</th>
			<th name="first">First Name</th>
			<th name="last">Last Name</th>
			<th>Phone</th>
			<th name="city">City</th>
			<th name="email">Email</th>
		</tr>
		<tr>
			<td><key>233</key> <button class="eventLink">edit</button></td>
			<td><input type="text" name="XXXX" val="YYYY"></input></td>
			<td>XXX</td>
			<td><input type="checkbox" checked name="zzTop"></input></td>
			<td><input type="checkbox" name="yyy"></input></td>
			<td><select name="yyy"><option>XXX</option><option SELECTED>YYY</option></select></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><key>1</key> <button class="eventLink">edit</button></td>
			<td>Brice</td>
			<td>Burgess</td>
			<td>(800)768-5283</td>
			<td>Milwaukee</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td><key>2</key> <button class="eventLink">edit</button></td>
			<td>Christian</td>
			<td>Bach</td>
			<td>(800)768-6288</td>
			<td>Chicago</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td><key>3</key> <button class="eventLink">edit</button></td>
			<td>Abe</td>
			<td>Lincoln</td>
			<td>(800)223-2331</td>
			<td>Washington D.C.</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td><key>8</key> <button class="eventLink">edit</button></td>
			<td>Sam Lightning</td>
			<td>Hopkings</td>
			<td>(800)728-1221</td>
			<td>Houston</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td><key>15</key> <button class="eventLink">edit</button></td>
			<td>Rudyard</td>
			<td>Kipling</td>
			<td>(512)121-1280</td>
			<td>London</td>
			<td>[email protected]</td>
		</tr>
	</tbody>
</table>

js文件

js<script type="text/javascript">
$().ready(function() {	
	$("#editableTable").tableSorter({ 
		sortClassAsc: 'headerSortUp', 		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 'ID' 	// DISABLE Sorting on ID
	}).tableEditor({
		EDIT_HTML: 'edit',
		SAVE_HTML: 'save',
		EVENT_LINK_SELECTOR: 'button.eventLink',
		FUNC_UPDATE: 'updateTable'
	});
	
	document.counter = 0;
});

function updateTable(o) {
	document.counter++;
	
	if ((document.counter%2) == 0) {
		// restore row
		alert('Update failed. Row restore.');
		$.tableEditor.lib.restoreRow(o.row,o.original);
	}
	else
		alert('Update Success');
		
	return true;
}
</script>