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]; }