• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 518
  • Last Modified:

How to control <span> for <tr>?

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
feng042497
Asked:
feng042497
  • 6
  • 4
  • 2
  • +3
4 Solutions
 
James RodgersWeb Applications DeveloperCommented:
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
 
snoyes_jwCommented:
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
 
James RodgersWeb Applications DeveloperCommented:
ok...thanks for the clarification snoyes_jw
 
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
feng042497Author Commented:
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
 
dakydCommented:
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
 
RanjeetRainCommented:
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
 
justinbilligCommented:
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
 
feng042497Author Commented:
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
 
RanjeetRainCommented:
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
 
feng042497Author Commented:
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
 
dakydCommented:
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
 
feng042497Author Commented:
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
 
dakydCommented:
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
 
feng042497Author Commented:
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
 
feng042497Author Commented:
Thanks for everyone's input.  It's a great discussion.  -Dennis
0
 
dakydCommented:
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
 
justinbilligCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 6
  • 4
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now