A jQuery table input widget

Joined:
02/21/2009: Posts:
151
March 13, 2011 13:44:37 Last update: March 21, 2011 11:30:55
This is a jQuery input control that lets you enter any number of input rows of name and value pairs.
Code
Demo
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Data Table</title>

	<link rel="stylesheet" type="text/css" media="all"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/>

	<style type="text/css">
		body {
			font-family: sans-serif;
		}

		div#params-container {
			position: relative;
			padding: 0;
			margin: 0;
		}

		table#params {
			font-size: 12px;
			border-collapse: collapse;
		}
		
		table#params th, table#params td {
			padding: 5px 8px;
			border: 1px solid #48B3FA;
		}

		table#params th.name {
			width: 148px;
		}

		table#params th.value {
			width: 271px;
		}

		table#params input.name {
			width: 142px;
			border: none;
			background-color: transparent;
		}

		table#params input.value {
			width: 265px;
			border: none;
			background-color: transparent;
		}

		ul#param-control {
			position: absolute;
			margin: 0;
			padding: 0;
		}

		ul#param-control li {
			cursor: pointer;
			float: left;
			list-style: none outside none;
			margin: 1px;
			padding: 2px;
		}
	</style>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
	</script>

	<script type="text/javascript">
	$(function() {
		// mouseover param-control
		$('#param-control')
		.hide()
		.mouseenter(function() {
			$(this).show();
		})
		.find('li')
		.mouseenter(function() {
			$(this).addClass('ui-state-hover');
		})
		.mouseleave(function() {
			$(this).removeClass('ui-state-hover');
		});

		var paramRow = '<tr><td><input class="name" name="paramName"></td>'
					 + '<td><input class="value" name="paramValue"></td></tr>';

		// initialize table
		$('table#params')
		.append('<tr><th class="name">Name</th><th class="value">Value</th></tr>')
		.append(paramRow);

		// display/hide border
		$('#params')
		.delegate('input', 'focus', function() {
			$(this).css({border: '1px solid #AAAAAA'});
			$('#param-control').hide();
		})
		.delegate('input', 'blur', function() {
			$(this).css({border: 'none'});
		})
		.delegate('tr:gt(0)', 'mouseenter', function() {
			var theRow = $(this),
			    position = theRow.position();
			$('#param-control')
			.css({
				top: position.top + 1 + 'px',
				left: position.left + 398 + 'px'
			})
			.show()
			.find('.add-param span')
			.unbind('click')
			.click(function() {
				$(paramRow)
				.insertAfter(theRow)
				.find('input.name')
				.focus();
			})
			.end()
			.find('.delete-param span')
			.unbind('click')
			.click(function() {
				if (theRow.siblings().length > 1) {
					theRow.remove();
					$('#param-control').hide();
				}
			});
		});
	});
	</script>

</head>

<body>
	<h1>Parameters</h1>

	<div id="params-container">
	<table id="params"></table>
	<!-- control for adding or removing a parameter -->
	<ul id="param-control">
		<li class="ui-state-default ui-corner-all add-param" title="Add">
			<span class="ui-icon ui-icon-circle-plus">Add</span>
		</li>
		<li class="ui-state-default ui-corner-all delete-param" title="Delete">
			<span class="ui-icon ui-icon-circle-close">Delete</span>
		</li>
	</ul>
	<!-- END control for adding or removing a parameter -->
	</div>

</body>
</html>
Share |
| Comment | Tags
Ξ Notes

A jQuery table input widget
