table {width: 100%;}
tr:nth-child(odd){
background: powderblue;
}
tr {
background: peachpuff;
}
var cache = {};
var buttons = document.querySelectorAll('button');
var t = document.querySelector('tbody');
var o = '';
for(var i = 0; i < 10; i++) {
o += '<tr><td>'+i+'</td></tr>';
}
t.innerHTML += o;
var rows = t.querySelectorAll('tr');
buttons[0].addEventListener('click', function(ev) {
killrow(1);
killrow(0);
killrow(5);
killrow(9);
}, false);
buttons[1].addEventListener('click', function(ev) {
recoverrow(1);
recoverrow(5);
recoverrow(0);
recoverrow(9);
}, false);
function killrow(i) {
cache[i] = rows[i];
rows[i].remove();
}
function recoverrow(i) {
var addto = i+1;
if (i === 0) {
t.insertBefore(cache[i],t.firstChild);
}
if (i === rows.length) {
t.appendChild(cache[i]);
}
while (cache[addto]) {
addto++;
}
t.insertBefore(cache[i],rows[addto]);
delete cache[i];
}