ruturajv · July 14, 2014 11:42
diff --git a/inplace-edit-template.html b/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>