單擊後顯示錶格行。點擊另一個後需要隱藏

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