alancnet
/
sd-spreadsheet


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<html>
<head>
<link href="css/prettify.css" rel="stylesheet"/>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/index.css" rel="stylesheet"/>

<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/mindmup-editabletable.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
</head>

<body>
<div class="container">
	<br/>
	<ul class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#home">Company 1</a></li>
		<li><a data-toggle="tab" href="#menu1">Company 2</a></li>
		<li><a data-toggle="tab" href="#menu2">Company 3</a></li>
		<li><a data-toggle="tab" href="#menu2">User</a></li>
	</ul>

	<div class="tab-content">
		<div id="home" class="tab-pane fade in active">
			<div class="hero-unit">
				<h1>Worksheet</h1>
				<h4>live edit</h4>
				
				<hr>
				
				<div class="alert alert-error hide">
					That would cost too much
				</div>
			
				<table id="mainTable" class="table table-striped" style="cursor: pointer;">
					<thead><tr><th>Name</th><th>Cost</th><th>Profit</th><th>Fun</th></tr></thead>
				
					<tbody>
						<tr><td tabindex="1">Car</td><td tabindex="1">100</td><td tabindex="1">200</td><td tabindex="1">0</td></tr>
						<tr><td tabindex="1">Bike</td><td tabindex="1">330</td><td tabindex="1">240</td><td tabindex="1">1</td></tr>
						<tr><td tabindex="1">Plane</td><td tabindex="1">430</td><td tabindex="1">540</td><td tabindex="1">3</td></tr>
						<tr><td tabindex="1">Yacht</td><td tabindex="1">100</td><td tabindex="1">200</td><td tabindex="1">0</td></tr>
						<tr><td tabindex="1">Segway</td><td tabindex="1">330</td><td tabindex="1">240</td><td tabindex="1">1</td></tr>
					</tbody>
				
					<tfoot><tr><th><strong>TOTAL</strong></th><th>1290</th><th>1420</th><th>5</th></tr></tfoot>
				</table>

				<input style="position: absolute; display: none;">
				
				<div style="text-align: right">
					<button type="submit" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
		
		<div id="menu1" class="tab-pane fade">
			<h3>Menu 1</h3>
			<p>Some content in menu 1.</p>
		</div>
		
		<div id="menu2" class="tab-pane fade">
			<h3>Menu 2</h3>
			<p>Some content in menu 2.</p>
		</div>
	</div>
</div>

<script>
$(function()
{
	$('table').editableTableWidget();
	
	$('table td').on('change', function(evt, newValue)
	{
		// do something with the new cell value 
/*		if (....) { 
			return false; // reject change
		}
*/
	});
});
</script>
</body>


</html>