Solved

hide show table rows cross browser

Posted on 2006-11-19
6
225 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 500 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
.php tree directory? 5 70
Error on link 14 46
Zoom the page when you go in from your phone 3 53
Place text over image using CSS 6 43
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

774 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