Javascript 单击后显示表格行。单击另一个后需要隐藏

我有这样的代码，它在单击时添加一个额外的表行，在再次单击确切的行时隐藏它。我必须使打开的行在单击另一行时消失。一次只能打开一行

代码：

[已编辑]

演示-类似这样的东西-

[已编辑2]

真正的代码如下所示：

    $res=mssql_query($query);

    echo "

    <table border='1' id='datu_tab' class='saraksts_table' width='100%' cellspacing='0'>

     <tr class='saraksts_header'>
    <th><center><font size='1.2px'>xx</font></center></th>
   <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
       <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
    </tr>

   ";

    while($row = mssql_fetch_array($res))
   {

      echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "</tr>"; 
      echo "<tr>"; 
      echo" <td colspan='9' style='background-color:#EEEEEE;'>
         <div id=v".$row["atz_id"]." ></div>      
   </td>";
          echo "</tr>";
   }
     echo "</table>";

$res=mssql\u查询（$query）；
回声“
xx
xx
xx
xx
xx
xx
xx
xx
xx
";
while（$row=mssql\u fetch\u数组（$res））
{
回声“；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回显“$row['xx']”；
回声“；
回声“；
回声“
";
回声“；
}
回声“；

HTML代码：

      <tr  OnClick= ' javascript:AjaxVesture(73)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxx4</td><td>000111</td><td>Sxxxs</td><td>Pxxxxds</td><td>C</td><td></td><td></td><td></td><td> </td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'><div id=v73 ></div> </td></tr>

     <tr  OnClick= ' javascript:AjaxVesture(9)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxxx56</td><td>0xxx8</td><td>Sxxxs A</td><td>xxxx</td><td>Ax

     <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v9 ></div> </td></tr>

      <tr  OnClick= ' javascript:AjaxVesture(66)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>xx</td><td>00xx</td><td>xx</td><td>xxxx</td><td>Axxx</td><td></td><td>01.01.2005</td><td></td><td>LC</td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v66 ></div>  </td></tr>    

lx4000111sxxspxxdsc
Lxxx560xxx8Sxxxs AxxxxAx
XX00XXXXXXXXXX01.01.2005LC

尝试以下操作：

$(document).ready(function(){
    /* $("#datu_tab tr:odd").addClass("odd"); do you need this for css? */
    $("#datu_tab tr:not(:odd):not(:first-child)").hide();

    $("#datu_tab tr:odd").click(function(){
        var oNext = $(this).next("tr");
        $("#datu_tab tr:not(:odd):not(:first-child)").not(oNext).hide();
        oNext.toggle();
        $(this).find(".arrow").toggleClass("up");
    });
});

也看到这个

==更新===

请替换以下代码行：

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

echo”“；

到

echo”“；

及

echo”
";

到

echo”
";

将您的示例发布到jsbin.com或jsfiddle.net，以便我们可以使用：-）看起来不错。谢谢编辑-抱歉，有点匆忙看起来不错，但有一些小故障。我有一个sql查询开关输出了很多行，而（$row=mssql\u fetch\u array（$res）），在第二次单击一些被取消的行（一些来自所需的行）后，您的代码可以显示sql查询后生成的html代码吗？需要什么？没有任何示例都很难调试。我已经用我的代码替换了示例中的js代码，效果很好（）。是的，在示例中效果很好，但在我的代码中没有。我添加了额外的信息。我忘记了第二部分中的反斜杠。请再次更换。

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].");tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=v".$row["atz_id"]." ></div>      
</td>";

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=\"v'.$row["atz_id"].'\" ></div>      
</td>";