写个超级简单的,自己扩展
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>Untitled Document</title>
<script language=\"javascript\">
function showHiddenTable(id1,id2)
{
document.getElementById(id1).style.display='none';
document.getElementById(id2).style.display='';
}
</script>
</head>
<body>
<table width=\"150\" border=\"1\" align=\"center\" cellpadding=\"1\" cellspacing=\"1\" bgcolor=\"#00FFFF\" id=\"table1\">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table width=\"150\" border=\"1\" align=\"center\" cellpadding=\"1\" cellspacing=\"1\" bgcolor=\"#CC6699\" id=\"table2\" style=\"display:none\">
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
<table width=\"150\" border=\"1\" align=\"center\" cellpadding=\"1\" cellspacing=\"1\">
<tr>
<td><input type=\"button\" value=\"上一步\" onclick=\"showHiddenTable('table2','table1');\" /></td>
<td><input type=\"button\" value=\"下一步\" onclick=\"showHiddenTable('table1','table2');\" /></td>
</tr>
</table>
</body>
</html>