View Full Version : show table rows (new to js)

09-08-2010, 06:55 PM

Have table with 5 rows - first two are visible - last three are not. Used this to hide last three

<tr id="row1" style="display: none">
<tr id="row2" style="display: none">
<tr id="row3" style="display: none">

I guess a js function would be able to display the 3 hidden rows - how?

Thanks - John

09-09-2010, 06:44 AM
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function showRows(){
var rows = document.getElementById('theTable').rows, i = rows.length - 1;
for (i; i > -1; --i){
if(rows[i].className === 'hidden'){
rows[i].style.display = '';
<table id="theTable">
<tr><td>1st seen</td></tr>
<tr><td>2nd seen</td></tr>
<tr class="hidden" style="display: none;"><td>3rd unseen</td></tr>
<tr class="hidden" style="display: none;"><td>4rth unseen</td></tr>
<tr class="hidden" style="display: none;"><td>5th unseen</td></tr>
<input type="button" onclick="showRows();" value="Show Rows">