クリック後の表の行が表示されます。

Question

私はこのコードを持っています。クリックすると余分なテーブル行が追加され、正確な行が再びクリックされると非表示になります。別の行をクリックすると、開いている行が消えるようにする必要があります。その時に余分な行を1つだけ開く必要があります。

コード：

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

    }); 

[EDITED]

デモ - このような何か - 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>";