CSS: Dynamic Alternate Rows

SO Question #42267771:

by abhitalks

HTML

<table id="tab"><tbody>
  <tr><td>Row 1</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 2</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 3</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 4</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 5</td><td><a href="#">Hide</a></td></tr>
</tbody></table><br />
<a id="show" href="#">Show All</a>

CSS

table { width: 50%; border: 1px solid gray; border-collapse: collapse; }
td { border: 1px solid gray; padding: 4px; }
tr.hidden { display: none; }
#tab tr.alt { background-color: #ddd;}

JavaScript

var tab = document.getElementById("tab"), 
	btns = tab.getElementsByTagName("a"), 
	show = document.getElementById("show"), 
	rows
;

stripe(); // Stripe the rows in beginning

// The stripe function itself
function stripe() {
    // select all rows which are not hidden
	rows = tab.querySelectorAll('tr:not(.hidden)');
  
    // add a class for every second such row
	for(var x = 0; x < rows.length; x++) {
    	if (x % 2 == 0) { rows[x].classList.add('alt'); }
		else { rows[x].classList.remove('alt'); }
	}
}

// dummy buttons to hide each row in this demo
[].forEach.call(btns, function(elem) {
	elem.addEventListener('click', hide);
});

// your actual code where you hide your rows
function hide(e) {
	e.target.parentNode.parentNode.classList.add('hidden');
	stripe(); // fire re-striping when hiding rows
}

// dummy button to show rows in this demo
show.addEventListener('click', function(e) {
	rows = tab.querySelectorAll('tr.hidden');
	[].forEach.call(rows, function(row) {
		row.classList.remove('hidden');
	});
	stripe(); // fire re-striping when showing rows
});