代码如下:
<div class="profile">
<table><!--四行五列 -->
<tr>
<td rowspan="3" width="193px">
<img src="/xiaonei/images/userhead/u1.gif" width="150px" height="150px" /></td>
<td colspan="4" class="word2">三少爷</td></tr>
<tr>
<td colspan="4"><span class="word4" id="sudo">目前什么都没做!</span>
<a class="xh" href="javascript:void(0);" οnclick="showDoing()">编辑</a>
</td></tr>
<tr>
<td width="83"><img src="/xiaonei/images/front/status.gif" />
<a class="xh" href="javascript:void(0);" οnclick="showDoing()">改状态</a></td>
<td width="83"><img src="/xiaonei/images/front/blog.gif" />
<a class="xh" href="writeBlog.jsp">写日志</a></td>
<td width="83"><img src="/xiaonei/images/front/photo.gif" />
<a class="xh" href="addAlbum.jsp">传照片</a></td>
<td width="83"><img src="/xiaonei/images/front/share.gif" />
<a class="xh" href="">分享</a></td>
</tr>
<tr id="doing" style="display: none;">
<td colspan="5">
<input type="text" value="doing some thing.." id="udo" size="30" />
<input type="submit" value="提交" style="width: 60px" class="sub" οnclick="fdoing()" />
<input type="button" value="取消" οnclick="hiddenDoing()" class="button2" /></td>
</tr>
</table>
</div>
script代码:
<script type="text/javascript">
function showDoing() {
document.getElementById("doing").style.display = "";
}
function hiddenDoing() {
document.getElementById("doing").style.display = "none";
}
</script>
实现的table布局:
头像 | 昵称 | |||
状态 编辑 | ||||
改状态 | 写日志 | 传照片 | 分享 | |
这一行默认不显示,当点击“编辑”或“修改状态时显示” |