Log in

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


JohnShell
09-08-2010, 06:55 PM
Hi,

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
jscheuer1
09-09-2010, 06:44 AM
<!DOCTYPE html>
<html>
<head>
<title></title>
<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 = '';
}
}
}
</script>
</head>
<body>
<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>
</table>
<input type="button" onclick="showRows();" value="Show Rows">
</body>
</html>