私はこのコードを持っています。クリックすると余分なテーブル行が追加され、正確な行が再びクリックされると非表示になります。別の行をクリックすると、開いている行が消えるようにする必要があります。その時に余分な行を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>
例をjsbin.comまたはjsfiddle.netに投稿してください:-) –