SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: hide row

  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide row

    I found the below code in this forum. Author adios. It works fine, but I need it tweaked. How can it be modified to hide multiple rows with the same id tag? I use ASP classic and generate like id's for the rows I want to hide, but this will still only hide the exact row on which my link is. Guessing, it hides the first id and stops instead of hiding them all. I know nothing about javascipt so any hand holding would be appreciated.

    thanks!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #foo {
    	position: absolute;
    	z-index: 99;
    	left: 120px;
    	top: 60px;
    }
    tr {
    	background: skyblue;
    }
    td {
    	font-size: smaller;
    	padding: 2px;
    	border: 3px #000 double;
    }
    a:link, a:visited, a:hover, a:active {
    	position: absolute;
    	left: 10px;
    	top: 70px;
    	font: normal 11px verdana;
    	color: darkred;
    	text-decoration: none;
    }
    a:hover {
    	padding-left: 3px;
    }
    
    </style>
    <script type="text/javascript">
    
    /* call onload with table id(s) */
    function TR_set_toggle()
    {
    	/* toggleRow method */
    	var toggleRow = function()
    	{
    		this.style.display = ((this.style.display == '') ? 'none' : '');
    		return false;
    	}
    
    	for (var oTable, a = 0; a < arguments.length; ++a)
    	{
    		oTable = document.getElementById(arguments[a]);
         		var r = 0, row, rows = oTable.rows;
         		while (row = rows.item(r++))
    			row.toggle = toggleRow;
    	}
    
    	/* convenience function */
    	self.toggleRow = function(row_id)
    	{
    		document.getElementById(row_id).toggle();
    	}
    }
    
    onload = function()
    {
    	TR_set_toggle('foo');
    }
    
    </script>
    </head>
    <body>
    <table id="foo">
    <tbody>
    <tr id="foo1">
    <td>row 1 row 1 row 1 row 1 row 1</td>
    <td>row 1 row 1 row 1 row 1 row 1</td>
    <td>row 1 row 1 row 1 row 1 row 1</td>
    <td>row 1 row 1 row 1 row 1 row 1</td>
    </tr>
    <tr id="foo2">
    <td>row 2 row 2 row 2 row 2 row 2</td>
    <td>row 2 row 2 row 2 row 2 row 2</td>
    <td>row 2 row 2 row 2 row 2 row 2</td>
    <td>row 2 row 2 row 2 row 2 row 2</td>
    </tr>
    <tr id="foo3">
    <td>row 3 row 3 row 3 row 3 row 3</td>
    <td>row 3 row 3 row 3 row 3 row 3</td>
    <td>row 3 row 3 row 3 row 3 row 3</td>
    <td>row 3 row 3 row 3 row 3 row 3</td>
    </tr>
    </tbody>
    </table>
    <a href="#null" onclick="toggleRow('foo1')">toggle row 1</a>
    <a href="#null" style="top:95px;" onclick="toggleRow('foo2')">toggle row 2</a>
    <a href="#null" style="top:120px;" onclick="toggleRow('foo3')">toggle row 3</a>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shankie View Post
    I found the below code in this forum. Author adios. It works fine, but I need it tweaked. How can it be modified to hide multiple rows with the same id tag?
    The major problem that you'll have there is that it's invalid to have the same id tag. They are called unique identifiers for a good reason.

    It would be class names that you use when you want to use the same name to identify multiple elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! Forgot all about the unique id. I can generate class names instead of id names, but I use class names for CSS and without having a finite number of rows I think that would be prohibitive as well because of CSS.

    Is there a way around this? Can a style tag be used to hide the row? Assuming yes, how would the code be modified?

    thanks!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE=shankie;4929007]Can a style tag be used to hide the row?[quote]

    Yes it can. You could have a CSS class called hidden.

    Code css:
    .hidden {
        display: none;
    }

    You could then set that class name on to an element by editing the className property of the element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •