ruturajv/inplace-edit-template.html

## inplace-edit-template.html
<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<title>Inplace Edit</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
	</style>
</head>
<body>

	<div class="container">

		<h1>Inplace Edit</h1>

		<h3>Features to Build</h3>
		<ul>
			<li>Click to edit ₹ column</li>
			<li>Pre-selected and focused input field</li>
			<li>Enter updates the value (possibly makes AJAX call)</li>
			<li>Escape on input field displays back original value</li>
			<li>Drill down menu, updates links on the fly</li>
			<li>Any click anywhere on body, hides the menu</li>
			<li>Escape anywhere hides the menu</li>
			<li>Implement <tt>this</tt> keyword atleast once.</li>
			<li>Implement indexedDB to retain the values.</li>
		</ul>

		<div class="row">
			<div class="col-lg-12">
				<table class="table table-striped table-bordered" id="table-inplace">
					<caption>Area-wise earnings</caption>
					<thead>
						<tr>
							<th>&nbsp;</th>
							<th>Area 1</th>
							<th>Area 2</th>
							<th>Area 3</th>
							<th>Area 4</th>
							<th>Area 5</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>

	</div> <!-- ./container -->
	<script type="text/javascript">
	var tBody = $('#table-inplace tbody');
	for (var i = 0; i < 100; i++) {
		tBody.append("<tr></tr>");
		var trLast = $("#table-inplace tr:last");
		trLast.append("<td class='drill'>*</td>");
		for (var j = 0; j < 5; j++) {
			var td = document.createElement("td");
			td.className = "text-right";
			td.innerHTML = "₹" + parseInt(Math.random()*100);
			trLast.append(td);
		};

	};

	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<title>Inplace Edit</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
	</style>
	</head>
	<body>

	<div class="container">

	<h1>Inplace Edit</h1>

	<h3>Features to Build</h3>
	<ul>
	<li>Click to edit ₹ column</li>
	<li>Pre-selected and focused input field</li>
	<li>Enter updates the value (possibly makes AJAX call)</li>
	<li>Escape on input field displays back original value</li>
	<li>Drill down menu, updates links on the fly</li>
	<li>Any click anywhere on body, hides the menu</li>
	<li>Escape anywhere hides the menu</li>
	<li>Implement <tt>this</tt> keyword atleast once.</li>
	<li>Implement indexedDB to retain the values.</li>
	</ul>

	<div class="row">
	<div class="col-lg-12">
	<table class="table table-striped table-bordered" id="table-inplace">
	<caption>Area-wise earnings</caption>
	<thead>
	<tr>
	<th> </th>
	<th>Area 1</th>
	<th>Area 2</th>
	<th>Area 3</th>
	<th>Area 4</th>
	<th>Area 5</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>

	</div> <!-- ./container -->
	<script type="text/javascript">
	var tBody = $('#table-inplace tbody');
	for (var i = 0; i < 100; i++) {
	tBody.append("<tr></tr>");
	var trLast = $("#table-inplace tr:last");
	trLast.append("<td class='drill'>*</td>");
	for (var j = 0; j < 5; j++) {
	var td = document.createElement("td");
	td.className = "text-right";
	td.innerHTML = "₹" + parseInt(Math.random()*100);
	trLast.append(td);
	};

	};

	</script>
	</body>
	</html>