Solved

How to control <span> for <tr>?

Posted on 2004-08-27
17
460 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
  • 6
  • 4
  • 2
  • +3
17 Comments
 
LVL 25

Assisted Solution

by:James Rodgers
James Rodgers earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
ok...thanks for the clarification snoyes_jw
 
0
 

Author Comment

by:feng042497
Comment Utility
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 200 total points
Comment Utility
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 100 total points
Comment Utility
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 100 total points
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 19

Expert Comment

by:RanjeetRain
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for everyone's input.  It's a great discussion.  -Dennis
0
 
LVL 19

Expert Comment

by:dakyd
Comment Utility
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
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now