• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 507
  • 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
Industry Leaders: 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!

 
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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