<head>
<title>test</title>
<meta http-equiv="content-Type" content="text/htmlcharset=utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addBtn').click(function(){
$('#tab').after($('#tab').clone(true))
})
$('#delBtn').click(function(){
if($('.tab_css').length >1)//保留第一个
$('.tab_css:last').remove()
})
})
</script>
<body>
<button id="addBtn">addTable</button>
<button id="delBtn">removeTable</button>
<table id="tab" width="98%" border="0" cellpadding="0" cellspacing="1" class="tab_css">
<tr>
<td width="135" height="27">日期：</td>
<td width="254" height="27"><input name="Update" type="text"></td>
<td width="67" height="27">贷方：</td>
<td width="271" height="27"><input name="huofang" type="text"></td>
<td width="99" height="27">付款方式：</td>
<td width="379" height="27">
<select size="1" name="Payment">
<option value="">请选择</option>
<option value="未付">未付</option>
<option value="电汇">电汇</option>
<option value="支票">支票</option>
</select></td>
</tr>
<tr>
<td>发票编号：</td>
<td><input name="fapiao" type="text"/> </td>
<td>借方：</td>
<td width="767" colspan="3"><input name="jiefang" type="text" /> </td>
</tr>
<tr>
<td height="41"></td>
<td colspan="5" align="left"height="41" width="1097">
<input name="submit" type="submit" value=" 确认提交 "> <input name="reset" type="reset" value=" 重新填写 ">
</td>
</tr>
</table>
</body>
</html>
给你两个办法.1.把表格预先写好,然后设置为隐藏的属性.当onclick后,就吧这个属性修改未可见
2.使用<div id="table"></div>onlick后, document.getElementById("table").innerHTML("<table>.......
</table>")
当然,你可以用js的框架...例如jquery去插入,更快捷,更方便
这个问题其实想要实现的效果不难，但关键在于你的数据是灵活变化的还是固定不变的？
（1）如果是固定的，我是指（表格大小，长宽，位置均不变，但图片内容是可以变化的），这个就很容易写，我写了一个简单的Demo
HTML:
<!DOCTYPE html><html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html charset=utf-8" />
<style type='text/css'>
.sel tr td{
width: 80px
background:#09f
height: 20px
text-align: center
color:#fff
cursor: pointer
}
table tr td img{display: none} /*这里我先把图片隐蔽了*/
</style>
</head>
<body>
<table>
<tr>
<!-- 给图片添加一个ID -->
<td><img src='../picture/01.jpg' id='img1' /></td>
<td><img src='../picture/02.jpg' id='img2' /></td>
<td><img src='../picture/03.jpg' id='img3' /></td>
</tr>
</table>
<table class="sel">
<tr>
<!--直接在td上添加事件，并传入指定的参数-->
<!-- 这个参数就是对应图片的ID -->
<td onclick="fToggle('img1')" >1</td>
<td onclick="fToggle('img2')" >2</td>
<td onclick="fToggle('img3')" >3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function fToggle(objId){
//触发事件后，根据传入的参数获取对应的图片的display值
var state = document.getElementById(objId).style.display
//再进行设置显示或是隐藏就行了
if( state == 'block' ){
document.getElementById(objId).style.display = 'none'
}
else{
document.getElementById(objId).style.display = 'block'
}
}
</script>
</html>
（2）如果是变化的（指图片多少，表格大小均可以变化），那这里就相对复杂些，不过思路依然是可以沿用上面的思路去做的！这里我就不写了，比较麻烦
