function show_hide_row(row)
{
$("#"+row).toggle();
}
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:50px;
font-size:45px;
color:#585858;
}
#wrapper h1 p
{
font-size:20px;
}
#table_detail
{
width:500px;
text-align:left;
border-collapse: collapse;
color:#2E2E2E;
border:#A4A4A4;
}
#table_detail tr:hover
{
background-color:#ddd;
cursor:pointer;
}
#table_detail .hidden_row
{
display:none;
}
<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>