Solved

How to control <span> for <tr>?

Posted on 2004-08-27
17
470 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
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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 

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 200 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 100 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 100 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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

821 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