Solved

hide show table rows cross browser

Posted on 2006-11-19
6
227 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: 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!

 
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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery slideToggle one div at a time instead of all independently 33 80
Make footer stick to bottom 6 27
Bootstrap 3 - Style a dropdown 1 25
bootstrap wrap text 1 30
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

740 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