Dynamic zebra table issue

by Dattaya

HTML

<button>remove rows</button>
  <button>add back rows</button>
  <table><tbody></tbody></table>

CSS

table {width: 100%;}
tr:nth-child(odd){
  background: powderblue;
}
tr {
  background: peachpuff;
}
.hidden { display: none; }

JavaScript

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) {
  if (rows[i].classList.contains('hidden')) return;
  rows[i].className += ' hidden';  
  rows[i].insertAdjacentHTML('beforebegin', '<tr class="hidden"></tr>');  
}

function recoverrow(i) {
  if (!rows[i].classList.contains('hidden')) return;
  rows[i].classList.remove('hidden');
  rows[i].previousSibling.remove();
}