hide show table rows cross browser

I need a javascript & css way to hide or show a row of a table dynamically dreated table.ASAP
calorisplanitiaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
hongjunConnect With a Mentor Commented:
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
 
calorisplanitiaAuthor Commented:
Perfect Solution & cross bowser compatible
Thankx hongjun
0
 
calorisplanitiaAuthor Commented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
hongjunCommented:
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
 
calorisplanitiaAuthor Commented:
Thanks a lot.
0
 
hongjunCommented:
No problem
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.

All Courses

From novice to tech pro — start learning today.