************************Head部分******************************
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script>
function showhidden(strid) {
var trid = document.getElementById("tr" + strid);
if (trid.style.display == "none") {
trid.style.display = "block";
}
else {
trid.style.display = "none";
}
}
function show(strid) {
var asd = document.getElementById("asd"+strid);
if (asd.style.display != "") {
$(".asd").css("display", "none");
asd.style.display = "";
}
else {
asd.style.display = "none";
}
}
</script>
<!--css 要換自己的-->
<style type="text/css">
.test td {
background-color: #F2F2F2;
color: #333;
border: 1px solid #CCC;
padding: 6px;
}
.test {
font-family: Verdana, Geneva, sans-serif;
}
.test th {
color: #FFF;
background-color: #666;
padding: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
.test tr th a {
font-weight: normal;
color: #FFF;
text-decoration: none;
}
</style>
************************Head部分結束******************************
*********************BODY部分***********************************************
<table width="650" border="0" cellspacing="0" cellpadding="0" class="test">
<tr>
<th scope="col">TITLE 1</th>
<th scope="col"><a onClick='show(10)' href="javascript:">open</a></th>
</tr>
<tr class="asd" id="asd10" style="display:none;">
<td colspan="2">Content Content</td>
</tr>
<tr>
<th>TIEL2</th>
<th><a onclick='show(11)' href="javascript:">open</a></th>
</tr>
<tr class="asd" id="asd11" style="display:none;">
<td colspan="2">Content2 Content2</td>
</tr>
</table>
***************************BODY部分結束****************************************
展開的字段
<a onClick='show(10)' href="javascript:" >展開</a>
被展開的部分
<tr class="asd" id='asd10' style="display:none;">
