Advanced Search

Results 1 to 2 of 2

Thread: show table rows (new to js)

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default show table rows (new to js)

    Hi,

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

    Code:
    <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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Code:
    <!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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •