[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

hide show table rows cross browser

Posted on 2006-11-19
6
Medium Priority
?
236 Views
Last Modified: 2008-02-01
I need a javascript & css way to hide or show a row of a table dynamically dreated table.ASAP
0
Comment
Question by:calorisplanitia
  • 3
  • 3
6 Comments
 
LVL 33

Accepted Solution

by:
hongjun earned 2000 total points
ID: 17974153
try something like this

<script>
function ShowHide(tr, flag) {
    if ( flag == 1 )
        tr.style.display = '';
    else if ( flag == 2 )
        tr.style.display = 'none';
}
</script>

<table border="1">
<tr id="tr1">
    <td>1, 1</td>
    <td>1, 2</td>
</tr>
<tr id="tr2">
    <td>2, 1</td>
    <td>2, 2</td>
</tr>
</table>

<br>

<input type="button" value="Show TR1" onclick="ShowHide(document.getElementById('tr1'), 1)">
<br>
<input type="button" value="Hide TR1" onclick="ShowHide(document.getElementById('tr1'), 2)">
<br>
<input type="button" value="Show TR2" onclick="ShowHide(document.getElementById('tr2'), 1)">
<br>
<input type="button" value="Hide TR2" onclick="ShowHide(document.getElementById('tr2'), 2)">
0
 

Author Comment

by:calorisplanitia
ID: 17974226
Perfect Solution & cross bowser compatible
Thankx hongjun
0
 

Author Comment

by:calorisplanitia
ID: 17974796
A modification if u can tell me
the aboce solution works fine , but can i use a plus minus image to toggle rows between visible & invisible instead of different buttons
Like if it is visible the  plus image show else minus image shows
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 33

Expert Comment

by:hongjun
ID: 17974823
try something like this

<script>
function ShowHide(tr, btn) {
      var flag;

      flag = tr.style.display == '' ? 2 : 1;

      if ( flag == 1 ) {
            tr.style.display = '';
            btn.value = 'Hide';
      }
      else if ( flag == 2 ) {
            tr.style.display = 'none';
            btn.value = 'Show';
      }
}
</script>

<table border="1">
<tr id="tr1">
      <td>1, 1</td>
      <td>1, 2</td>
</tr>
<tr id="tr2">
      <td>2, 1</td>
      <td>2, 2</td>
</tr>
</table>

<br>

<input type="button" value="Hide" onclick="ShowHide(document.getElementById('tr1'), this)">
<br>
<input type="button" value="Hide" onclick="ShowHide(document.getElementById('tr2'), this)">
0
 

Author Comment

by:calorisplanitia
ID: 17975099
Thanks a lot.
0
 
LVL 33

Expert Comment

by:hongjun
ID: 17977059
No problem
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month9 days, 19 hours left to enroll

591 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