Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to control <span> for <tr>?

Posted on 2004-08-27
17
Medium Priority
?
499 Views
Last Modified: 2012-05-05
I would like to control the <tr> row to hide or display it based on some rules.  So I'm using <span> right now.  I tried <span> in other cases and they're all working.  However, when I applied <span> to <tr> in <table>.  It cannot be hide even I set the style.display="none".  How can I achieve it?

Thanks,
Dennis
0
Comment
Question by:feng042497
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +3
17 Comments
 
LVL 25

Assisted Solution

by:James Rodgers
James Rodgers earned 400 total points
ID: 11915407
do it in the tr tag

you cannot do

<table>
<span>
<tr>
<td>
...
you can do
<span>
<table>
<tr>
<td>
...
or

<table>
<tr>
<td>
<span>...

but you can set tr's display or visibility in the style and manipulate with js
0
 
LVL 33

Expert Comment

by:snoyes_jw
ID: 11915439
Note that span is for inline elements, so for Jester's first example, you should use div instead to wrap around a table, which is block-level.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 11915474
ok...thanks for the clarification snoyes_jw
 
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:feng042497
ID: 11916386
Thanks for the info.  What's the best way to control set of <tr>.  Basically, I want to hide or display 3 <tr> at once.  I tried <div>, it seems work just like <span>.  No effect on <tr>.  Certainly I can set individual <tr> display style but it will be cumbusom to do so.  Is there anyway I can control a set of table row in one call?

Thanks,
Dennis
0
 
LVL 19

Accepted Solution

by:
dakyd earned 800 total points
ID: 11916613
Interestingly enough, Mozilla (and I think IE too, since I see the same behavior) will place div's and span's outside of the table.  If you do this:

<table>
  <div>
    <tr><td>blah</td></tr>
   </div>
</table>

Mozilla's DOM will make the div and the table siblings, rather than making the div the child or the table.  The standards-compliant way to separate out sections of your table is to use tbody (there can be more than one).  So, Dennis, something like this might help you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<script type="text/javascript">
function hide(id)
{
  document.getElementById(id).style.display = "none";
}
</script>
</head>

<body>
<table>
  <tbody>
    <tr><td>a</td></tr>
    <tr><td>b</td></tr>
    <tr><td>c</td></tr>
  </tbody>
  <tbody id="stuffToHide">
    <tr><td>d</td></tr>
    <tr><td>e</td></tr>
    <tr><td>f</td></tr>
  </tbody>
</table>

<a href="#" onclick="hide('stuffToHide'); return false;">HIDE ROWS</a>
</body>
</html>

Hope that helps.
0
 
LVL 19

Assisted Solution

by:RanjeetRain
RanjeetRain earned 400 total points
ID: 11917427
The simplest method I can think of is, to apply the rule on the TR element.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<script type="text/javascript">
function hide(id)
{
 document.getElementById(id).style.display = "none";
}
</script>
</head>

<body>
<table>
   <tr><td>a</td></tr>
   <tr><td>b</td></tr>
   <tr id="Hide1"><td>c <a href="#" onclick="hide('Hide1'); return false;">Hide this row</a></td></tr>
   <tr><td>d</td></tr>
   <tr><td>e</td></tr>
   <tr id="Hide2"><td>f <a href="#" onclick="hide('Hide2'); return false;">Hide this row</a></td></tr>
   <tr><td>g</td></tr>
</table>


</body>
</html>


0
 
LVL 15

Assisted Solution

by:justinbillig
justinbillig earned 400 total points
ID: 11917455
if you do that will it change the layout of the table, wont it shift all the cells around ... i did it this way using a global array ...

<script language="javascript">
      var astrCellValues = new Array( );

      function ToggleVisibility( blnHide )
      {
            try
            {
                  // Get a reference to the table body
                  var objTable = document.getElementById( "MainTable" ).childNodes[ 0 ];
                  var intRowIndex = 0;
                  var intColumnIndex = 0;
                  var intCellValuesIndex = 0;
                        
                  // Loop through all the rows
                  for( intRowIndex = 0; intRowIndex < objTable.childNodes.length; intRowIndex++ )
                  {
                        // Should I Toggle this visibility??
                        if( objTable.childNodes[ intRowIndex ].id == "HideMe" )
                        {
                              // Yes
                              for( intColumnIndex = 0; intColumnIndex < objTable.childNodes[ intRowIndex ].childNodes.length; intColumnIndex++ )
                              {

                                    // Hide this column?
                                    if( blnHide == true )
                                    {
                                          // Yes
                                          astrCellValues[ intCellValuesIndex ] = objTable.childNodes[ intRowIndex ].childNodes[ intColumnIndex ].innerHTML;
                                          objTable.childNodes[ intRowIndex ].childNodes[ intColumnIndex ].innerHTML = "&nbsp;";
                                    }
                                    else
                                    {
                                          // NO
                                          objTable.childNodes[ intRowIndex ].childNodes[ intColumnIndex ].innerHTML = astrCellValues[ intCellValuesIndex ];
                                          astrCellValues[ intCellValuesIndex ] = "";
                                    }
                              
                                    // increment our cell counnt
                                    intCellValuesIndex++;
                                          
                              }
                        }
                  }
            }
            catch( expError )
            {
                  alert( expError.description );      
            }
      }
</script>
<html>


      <body >
            <form name="frmTest">
                  <table id="MainTable">
                        <tr id="HideMe">
                              <td>Hide Me</td>
                              <td>Hide Me Too </td>
                        </tr>
            
                        <tr>
                              <td>Don't Hide Me</td>
                        <tr>
            
                        <tr id="HideMe">
                              <td>Hide Me</td>
                        </tr>
                  </table>

            <input type="button" value="Hide" name="btnHide" onclick="ToggleVisibility( true );">
            <input type="button" value="Un Hide" name="btnUnHide" onclick="ToggleVisibility( false );">

            </form>
      </body>
</html>



i looped through all the rows and checked if it had an ID of hidme .. if it did i changed the inner text to a non breaking space and stored the value in the global array,  the boolean paramter tells me if i shoudl hide it or display it
0
 

Author Comment

by:feng042497
ID: 11918317
Thanks for all the answers.  One more question.  I tried most of the solutions, all my tries works for IE but not Mozilla.  Is there any solution that can work for both browsers.

Thanks,
Dennis
0
 
LVL 19

Expert Comment

by:RanjeetRain
ID: 11918422
It should work on Mozilla too. However, you can do a document.all and document.layers test to see what browser it is running on. I believe that script shoudl work on Mozilla too. Are you using an old version of Mozilla?
0
 

Author Comment

by:feng042497
ID: 11918730
I tried on Mozilla Firefox 0.9, pretty latest.  Not working.  The requirement is for both IE and Netscape 7.0.1.  I'll test on it too.  I tried something a few days ago.  No go there either.
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11921332
Really? That's odd, I put up the exact same code I posted in a test page (http://www.freewebs.com/dakyd/ee/test.html) and it works fine in Mozilla 1.7.  And Firefox should be able to handle a simple getElementById, which is pretty much what all of our solutions use.  

Is there something I'm missing?  Do you expect behavior other than just simply hiding the rows?
0
 

Author Comment

by:feng042497
ID: 11922015
OK, the part not working on Mozilla is to dynamically set the style.  For example, in javascript, I have something like  document.getElementById("fieldName").style.display="none".  It's working in IE, but not in any of the Netscape or Mozilla browser.

Thanks,
Dennis
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11924642
I'm still not following - if you can access the object with document.getElementById, then hiding it with a style.display = "none" should be fine.  That's what all the suggestions (except for justinbillig's) use, and if you can hide the rows on the test page I posted, then it's working fine.

Am I correct in assuming it's not the sample scripts we have posted that you're having problems with?  If so, why don't you post either the source or a link to it so we can take a look?  Otherwise, do you get javascript errors?
0
 

Author Comment

by:feng042497
ID: 11926607
dakyd, my bad.  I didn't copy the code from here.  But I follow the concept you guys suggest but no work for Mozilla.  Now I found the reason.

Basically I use the code mentioned in "JavaScript Bible", such as document.all["innerSpan"].style.display="none".  It works perfectly fine in IE but not in Netscape and Mozilla.  Now if I change it to "document.getElementById("innerSpan").style.display="none", it starts to work for both.  So document.all["id"] only works for IE.  This is the lesson to learn.  I should use the wrapper API to access the html object instead of using the array directly.  Thanks for everybody's patience.
0
 

Author Comment

by:feng042497
ID: 11926636
Thanks for everyone's input.  It's a great discussion.  -Dennis
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11927111
Yup, that'll do it.  document.all was/is an IE-only addition, and document.getElementById is the standards-compliant way of accessing elements in the DOM.  Anyhow, glad to hear you got what you wanted, and thanks for the points.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11929998
there is one snafu with mine i found out on friday at like 5 but couldnt fix real quick, if you press hide more than once it will overwrite the origional code with the &nbsp;

so a little bit of button enable disable should fix that
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question