Hide or display multiple tables with javascript

Question

I'm trying to make a function in JS that hides all the tables on the page except the one that is selected on this list :

    echo '<FORM><SELECT id="listB" onchange="selecTable">';
    for ($i=0;$i<$size;$i++)
    {
        echo '<OPTION VALUE="'.$rows[$i][0].'">'.$rows[$i][1];
    }
    echo '</SELECT></FORM>';

I've tried to make it both in one and two functions, one function version below:

    function selecTable(size)
    {                 
        var tab="tab"+document.getElementById("listeB").value;
        for (var i=0;i<=size;i++)
        {
            name="tab"+i;
            if (name===tab)
            {
                document.getElementById(name).style.display='';
            }else{
                document.getElementById(name).style.display='none';
        }
    }

And the code for the tables I'm trying to display/hide:

    for ($i=0;$i<$nbtab[0];$i++)
    {
        echo '<table  id="tab',$i+1,'" style="display:none"><thead><tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
              </tr></thead><tbody>';
        for ($j=0;$j<sizeof($mytable);$j++)
        {
            if ($mytable[$j][0]==$rows[$i][0])
            {
                echo '<tr><td>'.$mytable[$j][1].'</td> '
                    .'<td>'.$mytable[$j][2].'</td> '
                    .'<td>'.$mytable[$j][3].'</td> '
                    .'<td>'.$mytable[$j][4].'</td> '
                    .'<td>'.$mytable[$j][5].'</td></tr>';
            }
        }
        echo '</tbody></table>';
    }

The problem here is that I can't get the table I want to appear. I already succeeded in making them appear one by one (by commenting the "else"), but everytime I try to hide all the other tables, the script doesn't do anything anymore... What's the problem here?

Alok Patel · Accepted Answer · 2016-06-14 11:57:27Z

1

You're assigning different value of <option> element and <table> id.

echo '<OPTION VALUE="'.$rows[$i][0].'">'.$rows[$i][1];

Value of <option> tag is from database value. And,

 echo '<table  id="tab',$i+1,'" style="display:none"><thead><tr>

Value of <table> id is a counter from loop index. Make sure they both are same to get the expected results.

answered Jun 14, 2016 at 11:57

Alok Patel

8,0726 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Syraxis Over a year ago

In fact, I use $rows[$i][0] in my function and add "tab" before, so they both are like that : tabx .

Alok Patel Over a year ago

$rows[$i][0] and ($i+1) are same?

Syraxis Over a year ago

Yes. At the moment, each $rows[$i][0] have the value 1,2,3 and 4. I add +1 to get the tables on the same 'level' otherwise the tables would be tab0,tab1,tab2 and tab3.

Syraxis · Accepted Answer · 2016-06-16 10:51:32Z

1

Found my answer online :

    $(function() {
            $("#listeB").on("change", function() {
                var id = "#tab" + $("#listB").val();
                $("table").hide();
                $(id).show();
            });
    });

answered Jun 16, 2016 at 10:51

Syraxis

1381 silver badge10 bronze badges

Collectives™ on Stack Overflow

Hide or display multiple tables with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related