Hide or display multiple tables with javascript

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?