how to preserve correct row highlighting when dynamically manipulating table structure (with css3); useful for ajaxed tables

css3 cycled table row highlighting.html

<!-- CSS3 ROW STYLE CYCLING
* alternative pseudo-class notation:
  :nth-child(2n)   == :nth_child(even)
  :nth-child(2n+1) == :nth_child(odd)
-->

<style type="text/css">
table.css-cycle tr:nth-child(2n) {
  background: silver;
}
table.css-cycle tr:nth-child(2n+1) {
  background: #fafafa;
}
</style>

<!-- MINI DOM TOOLKIT -->

<script type="text/javascript">
function del(node) {
  if (node && node.parentNode)
    node.parentNode.removeChild(node);
}

function pdel(node, tagName) {
  del(pfind(node, tagName));
}

function pdel_tr(node) {
  pdel(node, 'TR');
}

function pfind(node, tagName) {
  while (node != null && node.tagName != tagName)
    node = node.parentNode;
  return node;
}
</script>

<!-- PLAYGROUND -->

<table class="css-cycle">
<tr>
<td>1</td><td>2</td><td>3</td><td><a href="#" onclick="pdel_tr(this);return false">X</a></td>
</tr>
<tr>
<td>2</td><td>2</td><td>3</td><td><a href="#" onclick="pdel_tr(this);return false">X</a></td>
</tr>
<tr>
<td>3</td><td>2</td><td>3</td><td><a href="#" onclick="pdel_tr(this);return false">X</a></td>
</tr>
<tr>
<td>4</td><td>2</td><td>3</td><td><a href="#" onclick="pdel_tr(this);return false">X</a></td>
</tr>
<tr>
<td>5</td><td>2</td><td>3</td><td><a href="#" onclick="pdel_tr(this);return false">X</a></td>
</tr>
</table>