0

I try to hide specific rows of a table when a specific cell is clicked. However the screen automatically scrolled to the top of the page when the target block of rows is hidden. The main Cell is clickable and allow to hide the following associated cells. My table is very big and they are multiple clickable cells.

Here is simple version of my code:

<tr id="Main1" onclick="hideTr(this.id)"><td><a href="#">Main1</a></td></tr>
    <tr class = "main1Tr"><td>Cell1</td>
    </tr>
    <tr class = "main1Tr"><td>Cell2</td>
    </tr>
<tr id="Main2" onclick="hideTr(this.id)"><td><a href="#">Main2</a></td></tr>
        <tr class = "main2Tr"><td>Cell3</td>
        </tr>
        <tr class = "main2Tr"><td>Cell4</td>
        </tr>

function hideTr(id){
if(id=="Main1"){
    loading = document.getElementsByClassName("main1Tr");
        for (var i = 0; i < loading.length; i++){
            display = loading[i].style.display;
            if(display ==  "none"){loading[i].style.display="";}
            if(display ==  ""){loading[i].style.display="none";}
        }
    }
if(id=="Main2"){
        loading = document.getElementsByClassName("main2Tr");
            for (var i = 0; i < loading.length; i++){
                display = loading[i].style.display;
                if(display ==  "none"){loading[i].style.display="";}
                if(display ==  ""){loading[i].style.display="none";}
            }
        }
}
Idrees Samim
  • 463
  • 5
  • 15

2 Answers2

1

You forgot to return false; in your onclick handler (not inside hideTr, that won't work). That should fix it.

Community
  • 1
  • 1
hashchange
  • 7,029
  • 1
  • 45
  • 41
1

you have to return false onclick try onclick="hideTr(this.id);return false"

Suhail Keyjani
  • 488
  • 3
  • 10