展开/折叠表格行 Javascript 工作错误答案

【问题标题】：Expand/Collapse table row Javascript works wrongly展开/折叠表格行 Javascript 工作错误
【发布时间】：2018-06-05 00:37:42
【问题描述】：

我正在使用此代码来扩展数据库表行以显示有关该项目的更多信息，但它的作用恰恰相反。

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

当我打开表格时，所有必须隐藏的行都会显示出来，如果我点击任何主行，它将隐藏那些行。如何反转这个？这是我用于表格的部分代码（我知道，它很乱）：

    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>";

【问题讨论】：

尝试在您的文件中使用 CSS 并包含 <style> .expand { display:none; } </style> - 我使用基于 jQuery 的切换脚本，这就是我遇到类似问题时使用的。您可能需要改用.hidden { display:none; }。但是，我使用的是id。
太好了，现在它可以正常工作了。谢谢，弗雷德 :)
不客气。想让我把它作为结束问题的答案吗？我相信其他人会出现并使用我的评论来这样做。 ;-)
@Fred-ii- TIL 关于 Ahoy！
TIL 是什么意思？大声笑@MikeB

标签： javascript php mysql html-table

【解决方案1】：

尝试在您的文件中使用 CSS 并包含以下内容：

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

我使用了一个基于 jQuery 的切换脚本，当我遇到类似的问题时，我就使用了这个脚本。

您可能需要改用.hidden { display:none; }。

【讨论】：