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

Question

我有这个代码，点击时会添加一个额外的表格行，并在再次单击确切的行时隐藏它。当另一行被点击时，我必须使打开的行消失。当时应该只打开一个额外的行。

代码：

$(document).ready(function(){ 
     $("#datu_tab tr:odd").addClass("odd"); 
     $("#datu_tab tr:not(.odd)").hide(); 
     $("#datu_tab tr:first-child").show(); 

     $("#datu_tab tr.odd").click(function(){ 
      $(this).next("tr").toggle(); 
      $(this).find(".arrow").toggleClass("up"); 
     }); 

    }); 

将帖子

演示 - 这样的事情 - http://jsfiddle.net/658vH/

[edited2]

真正的代码看起来是这样的：

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

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>  

Answer 1

尝试以下操作：

$(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"); 
    }); 
}); 

也看到这个example。

=== UPDATE ===

请替换下面的代码行：

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