tableの行をクリックすると下部に詳細が表示される
Result
jQuery
function show_hide_row(row)
{$("#"+row).toggle();}
|
css
#table_detail tr:hover{
background-color:#ddd;
cursor:pointer;
}
#table_detail .hidden_row{
display:none;
}
|
html
<table border=1 id="table_detail" align=center cellpadding=10>
<tr>
<th>名前</th>
<th>年齢</th>
<th>給料</th>
<th>仕事</th>
</tr>
<tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><td>9万</td><td>フリーター</td></tr>
<tr id="hidden_row1" class="hidden_row">
<td colspan=4>たける、25歳。会社員を目指すが現在はフリーターとしてアルバイトを2～3社で。月の給料は総額9万ほど。</td>
</tr>
<tr onclick="show_hide_row('hidden_row2');"><td>まさみ</td><td>29</td><td>40万</td><td>Webデザイナー</td></tr>
<tr id="hidden_row2" class="hidden_row">
<td colspan=4>まさみ、29歳。Webデザイナーとして3年間勤務。腕もよく企業からの信頼も厚い。手取りで40万。</td>
</tr>
<tr onclick="show_hide_row('hidden_row3');"><td>あつし</td><td>32</td><td>120万</td><td>経営コンサルタント</td></tr>
<tr id="hidden_row3" class="hidden_row">
<td colspan=4>Atsushi is 32 years old and he is a management consultant he earns 1200000 per month</td>
</tr>
</table>
|
via
Expand Table Rows Using jQuery, HTML And CSS
