Skip to content

Instantly share code, notes, and snippets.

@artyil

artyil/index.html

Forked from anonymous/index.html
Created May 13, 2016 19:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artyil/9a12a4251f0f2fac04f9cccee3409b15 to your computer and use it in GitHub Desktop.
Save artyil/9a12a4251f0f2fac04f9cccee3409b15 to your computer and use it in GitHub Desktop.
Download ZIP
MutationObserver Table // source http://jsbin.com/faticiripi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MutationObserver Table</title>
<style id="jsbin-css">
html, body {
padding:0;
margin:0;
min-height: 100%;
}
.wrap{
margin:2em auto;
width:90%;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
td,
th {
padding: 0;
text-align: left;
}
td *,
th * {
box-sizing: border-box;
position: relative;
}
table > thead {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7fc6f9+0,189cf9+50,7fc6f9+100 */
background: linear-gradient(to bottom, #7fc6f9 0%,#189cf9 50%,#7fc6f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
th:not(:first-child):not(:last-child) {
border-color: #fff;
border-style: solid;
border-width: 0 1px;
}
tbody tr:nth-child(odd) {
background-color: rgba(137, 202, 255, 0.38);
}
tbody tr:nth-child(even) {
background-color: #FFF;
}
tbody tr:hover,
tbody tr:focus {
color:#fff;
background-color: #85caff;
}
td .cell,
th .cell {
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
overflow: hidden;
width: 100%;
display: inline-block;
padding: 4px 5px 2px;
position: relative;
}
th:hover{
font-weight:bold;
color:#fff;
}
tbody tr {
cursor: pointer;
}
.row{
padding: 5px 0;
}
.row .label{
display: inline-block;
width: 30%;
}
span.badge {
font-weight: 700;
background-color: #26a69a;
padding: 2px 1rem;
text-align: center;
font-size: 1rem;
color: #fff;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="row">
<span class="label">Observer counter: </span>
<span id="observer-counter" class="badge">0</span>
</div>
<div class="row">
<span class="label">Mutate counter:</span>
<span id="mutate-counter" class="badge">0</span>
</div>
<div class="row" onclick="mutateTableTrs()">
<button>Mutate &lt;tr&gt;s</button>
</div>
</div>
<div class="wrap">
<table id="table">
<thead>
<tr>
<th><span class="cell">Lorem.</span></th>
<th><span class="cell">In.</span></th>
<th><span class="cell">Molestias.</span></th>
<th><span class="cell">Molestias.</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Consequuntur.</span></td>
<td><span class="cell">Consequatur.</span></td>
<td><span class="cell">Eveniet.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Alias.</span></td>
<td><span class="cell">Dolores!</span></td>
<td><span class="cell">Porro?</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Autem?</span></td>
<td><span class="cell">Cum.</span></td>
<td><span class="cell">Ipsum!</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Repellat!</span></td>
<td><span class="cell">Beatae!</span></td>
<td><span class="cell">Nostrum.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Minus.</span></td>
<td><span class="cell">Laudantium?</span></td>
<td><span class="cell">Cumque.</span></td>
</tr>
</tbody>
</table>
</div>
<script id="jsbin-javascript">
'use strict';
// function main(){
let mutateCounter = 0;
let observerCounter = 0;
let $observerCounter = document.querySelector('#observer-counter');
let $mutateCounter = document.querySelector('#mutate-counter');
let table = document.querySelector('#table');
let observer = new MutationObserver(function () {
observerCounter++;
$observerCounter.textContent = observerCounter;
});
observer.observe(table.tBodies[0], {
childList: true,
subtree: true
});
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam tempora deleniti, esse! Libero sapiente aut eos delectus, reiciendis harum, totam quisquam sit nemo asperiores eveniet fugit. Quos, earum, fugit.'.split(/\s+/);
function randomLorem(){
return lorem[ randomIntInclusive(0,lorem.length-1) ];
}
function mutateTableTrs() {
let tbodyHTML = `
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Consequuntur.</span></td>
<td><span class="cell">Consequatur.</span></td>
<td><span class="cell">Eveniet.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Alias.</span></td>
<td><span class="cell">Dolores!</span></td>
<td><span class="cell">Porro?</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Autem?</span></td>
<td><span class="cell">Cum.</span></td>
<td><span class="cell">Ipsum!</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Repellat!</span></td>
<td><span class="cell">Beatae!</span></td>
<td><span class="cell">Nostrum.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Minus.</span></td>
<td><span class="cell">Laudantium?</span></td>
<td><span class="cell">Cumque.</span></td>
</tr>
`;
table.tBodies[0].innerHTML = tbodyHTML.repeat(randomIntInclusive(1,10));
let rows = table.tBodies[0].rows;
Array.from(rows).forEach(function (row) {
Array.from(row.cells).forEach(td => {
td.querySelector('.cell').textContent = randomLorem();
})
});
mutateCounter++;
$mutateCounter.textContent = mutateCounter;
}
// var intervalId = setInterval(metateTableTrs, 1000);
function randomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// }
</script>
<script id="jsbin-source-css" type="text/css">html, body {
padding:0;
margin:0;
min-height: 100%;
}
.wrap{
margin:2em auto;
width:90%;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
td,
th {
padding: 0;
text-align: left;
}
td *,
th * {
box-sizing: border-box;
position: relative;
}
table > thead {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7fc6f9+0,189cf9+50,7fc6f9+100 */
background: linear-gradient(to bottom, #7fc6f9 0%,#189cf9 50%,#7fc6f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
th:not(:first-child):not(:last-child) {
border-color: #fff;
border-style: solid;
border-width: 0 1px;
}
tbody tr:nth-child(odd) {
background-color: rgba(137, 202, 255, 0.38);
}
tbody tr:nth-child(even) {
background-color: #FFF;
}
tbody tr:hover,
tbody tr:focus {
color:#fff;
background-color: #85caff;
}
td .cell,
th .cell {
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
overflow: hidden;
width: 100%;
display: inline-block;
padding: 4px 5px 2px;
position: relative;
}
th:hover{
font-weight:bold;
color:#fff;
}
tbody tr {
cursor: pointer;
}
.row{
padding: 5px 0;
}
.row .label{
display: inline-block;
width: 30%;
}
span.badge {
font-weight: 700;
background-color: #26a69a;
padding: 2px 1rem;
text-align: center;
font-size: 1rem;
color: #fff;
box-sizing: border-box;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">'use strict';
// function main(){
let mutateCounter = 0;
let observerCounter = 0;
let $observerCounter = document.querySelector('#observer-counter');
let $mutateCounter = document.querySelector('#mutate-counter');
let table = document.querySelector('#table');
let observer = new MutationObserver(function () {
observerCounter++;
$observerCounter.textContent = observerCounter;
});
observer.observe(table.tBodies[0], {
childList: true,
subtree: true
});
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam tempora deleniti, esse! Libero sapiente aut eos delectus, reiciendis harum, totam quisquam sit nemo asperiores eveniet fugit. Quos, earum, fugit.'.split(/\s+/);
function randomLorem(){
return lorem[ randomIntInclusive(0,lorem.length-1) ];
}
function mutateTableTrs() {
let tbodyHTML = `
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Consequuntur.</span></td>
<td><span class="cell">Consequatur.</span></td>
<td><span class="cell">Eveniet.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Alias.</span></td>
<td><span class="cell">Dolores!</span></td>
<td><span class="cell">Porro?</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Autem?</span></td>
<td><span class="cell">Cum.</span></td>
<td><span class="cell">Ipsum!</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Repellat!</span></td>
<td><span class="cell">Beatae!</span></td>
<td><span class="cell">Nostrum.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Minus.</span></td>
<td><span class="cell">Laudantium?</span></td>
<td><span class="cell">Cumque.</span></td>
</tr>
`;
table.tBodies[0].innerHTML = tbodyHTML.repeat(randomIntInclusive(1,10));
let rows = table.tBodies[0].rows;
Array.from(rows).forEach(function (row) {
Array.from(row.cells).forEach(td => {
td.querySelector('.cell').textContent = randomLorem();
})
});
mutateCounter++;
$mutateCounter.textContent = mutateCounter;
}
// var intervalId = setInterval(metateTableTrs, 1000);
function randomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// }
</script></body>
</html>
Raw
jsbin.faticiripi.css
html, body {
padding:0;
margin:0;
min-height: 100%;
}
.wrap{
margin:2em auto;
width:90%;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
td,
th {
padding: 0;
text-align: left;
}
td *,
th * {
box-sizing: border-box;
position: relative;
}
table > thead {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7fc6f9+0,189cf9+50,7fc6f9+100 */
background: linear-gradient(to bottom, #7fc6f9 0%,#189cf9 50%,#7fc6f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
th:not(:first-child):not(:last-child) {
border-color: #fff;
border-style: solid;
border-width: 0 1px;
}
tbody tr:nth-child(odd) {
background-color: rgba(137, 202, 255, 0.38);
}
tbody tr:nth-child(even) {
background-color: #FFF;
}
tbody tr:hover,
tbody tr:focus {
color:#fff;
background-color: #85caff;
}
td .cell,
th .cell {
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
overflow: hidden;
width: 100%;
display: inline-block;
padding: 4px 5px 2px;
position: relative;
}
th:hover{
font-weight:bold;
color:#fff;
}
tbody tr {
cursor: pointer;
}
.row{
padding: 5px 0;
}
.row .label{
display: inline-block;
width: 30%;
}
span.badge {
font-weight: 700;
background-color: #26a69a;
padding: 2px 1rem;
text-align: center;
font-size: 1rem;
color: #fff;
box-sizing: border-box;
}
Raw
jsbin.faticiripi.js
'use strict';
// function main(){
let mutateCounter = 0;
let observerCounter = 0;
let $observerCounter = document.querySelector('#observer-counter');
let $mutateCounter = document.querySelector('#mutate-counter');
let table = document.querySelector('#table');
let observer = new MutationObserver(function () {
observerCounter++;
$observerCounter.textContent = observerCounter;
});
observer.observe(table.tBodies[0], {
childList: true,
subtree: true
});
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam tempora deleniti, esse! Libero sapiente aut eos delectus, reiciendis harum, totam quisquam sit nemo asperiores eveniet fugit. Quos, earum, fugit.'.split(/\s+/);
function randomLorem(){
return lorem[ randomIntInclusive(0,lorem.length-1) ];
}
function mutateTableTrs() {
let tbodyHTML = `
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Consequuntur.</span></td>
<td><span class="cell">Consequatur.</span></td>
<td><span class="cell">Eveniet.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Alias.</span></td>
<td><span class="cell">Dolores!</span></td>
<td><span class="cell">Porro?</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Autem?</span></td>
<td><span class="cell">Cum.</span></td>
<td><span class="cell">Ipsum!</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Repellat!</span></td>
<td><span class="cell">Beatae!</span></td>
<td><span class="cell">Nostrum.</span></td>
</tr>
<tr>
<td><span class="cell">Lorem.</span></td>
<td><span class="cell">Minus.</span></td>
<td><span class="cell">Laudantium?</span></td>
<td><span class="cell">Cumque.</span></td>
</tr>
`;
table.tBodies[0].innerHTML = tbodyHTML.repeat(randomIntInclusive(1,10));
let rows = table.tBodies[0].rows;
Array.from(rows).forEach(function (row) {
Array.from(row.cells).forEach(td => {
td.querySelector('.cell').textContent = randomLorem();
})
});
mutateCounter++;
$mutateCounter.textContent = mutateCounter;
}
// var intervalId = setInterval(metateTableTrs, 1000);
function randomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment