展开/折叠表格行Javascript无法正常工作

Question

I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.

    $("td span.expand").click(function() {
    $(this).parents("tr.main").nextUntil("tr.main"). toggle();
});

When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows. How to invert this? Here's part of code I use for table (I know, it's messy):

    echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px"><a href="?page='.$page.'&sort=nr&sort_by='.$sort_order.'">Nr.</a></th>
<th width="75px"><a href="?page='.$page.'&sort=numurs&sort_by='.$sort_order.'">Mašīnas numurs</a></th>
<th width="75px"><a href="?page='.$page.'&sort=regnr&sort_by='.$sort_order.'">Reģistrācijas numurs</a></th>
<th width="75px"><a href="?page='.$page.'&sort=modelis&sort_by='.$sort_order.'">Marka / Modelis</a></th>
<th width="75px"><a href="?page='.$page.'&sort=apzim&sort_by='.$sort_order.'">ID</a></th> 
</tr>';

    //Ieraksta datus tabulā
while($row = mysql_fetch_array($query)) 
  {
  echo "<tr class='main'>";
    echo "<td width='30px'>" . $row['nr'] . "</td>";
    echo "<td width='75px'>" . $row['numurs'] . "</td>";
    echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
    echo "<td>" . $row['modelis'] . "</td>";
    echo "<td>" . $row['apzim'] . "</td>";
  echo "</tr>";
  echo "<tr class='hidden'>";
    echo "<td>text</td>";
    echo "<td>text</td>";
    echo "<td>text</td>";
  echo "</tr>";
  }
echo "</table>";
echo "<br>";

Answer 1

Try using CSS in your file and include the following:

<style>
.expand
{
display:none;
}
</style> 

I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.

You may need to use .hidden { display:none; } .hidden { display:none; } instead.