Skip to content

Instantly share code, notes, and snippets.

@callumj

callumj/index.html

Last active July 14, 2017 22:58
Show Gist options
  • Save callumj/5daa2193fcaf58544c7b437c5bb39ad1 to your computer and use it in GitHub Desktop.
Save callumj/5daa2193fcaf58544c7b437c5bb39ad1 to your computer and use it in GitHub Desktop.
Download ZIP
window_test
Raw
index.html
<html>
<head>
<style type="text/css">
td, th {
text-align: center;
}
.view {
cursor: pointer;
}
td.main {
border-width: 1px;
width: 150px;
height: 150px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
td table {
width: 100%;
}
tr.save:hover {
cursor: pointer;
}
</style>
<script type="text/javascript">
setNotSaving = function(target) {
var root = target.parentNode.parentNode.parentNode;
var cln = document.getElementById("contents").firstElementChild.cloneNode(true);
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(cln);
bindThings();
}
handleSaveClick = function() {
this.firstElementChild.innerText = "Saving....";
var that = this;
window.setTimeout(function() { this.setNotSaving(that) }, 1000);
}
handleEditClick = function() {
var cln = document.getElementById("form").firstElementChild.cloneNode(true);
while (this.firstChild) {
this.removeChild(this.firstChild);
}
this.appendChild(cln);
bindThings();
this.removeEventListener("click", handleEditClick);
}
bindThings = function() {
var objects = document.getElementsByClassName("save");
for (var i = 0; i < objects.length; i++) {
objects[i].removeEventListener("click", handleSaveClick);
objects[i].addEventListener("click", handleSaveClick);
}
var objects = document.getElementsByClassName("main");
for (var i = 0; i < objects.length; i++) {
objects[i].removeEventListener("click", handleEditClick);
objects[i].addEventListener("click", handleEditClick);
}
};
document.addEventListener("DOMContentLoaded", function(event) {
bindThings();
});
bindThings();
</script>
</head>
<body>
<div style="display: none">
<div id="contents">
<table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
</div>
<div id="form">
<table>
<tbody>
<tr>
<td><input value="100" /></td>
</tr>
<tr>
<td><input value="1" style="width: 10px" /> room loaded</td>
</tr>
<tr><td style="height: 10px"></td></tr>
<tr class="save">
<td style="background-color: rgb(164, 218, 166); padding-top: 10px; padding-bottom: 10px">Save changes</td>
</tr>
</tbody>
</table>
</div>
</div>
<table style="width: 1050px;">
<thead>
</thead>
<tbody>
<tr>
<th>SUN</th>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
</tr>
<tr>
<td class="main">
<table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
</td>
<td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
</tr>
<tr>
<td class="main">
<table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
</td>
<td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
<td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment