JS 如何点击按钮添加整个表格 30
比如有一个添加的表格，含多个填写的内容，这个往数据库里添加的，此时我需要添加重复多项内容。这时就要有一个JS，点击按钮可以添加整个表格。目前看到过不少添加一行的示例，比如...
比如有一个添加的表格，含多个填写的内容，这个往数据库里添加的，此时我需要添加重复多项内容。这时就要有一个JS，点击按钮可以添加整个表格。目前看到过不少添加一行的示例，比如图片上传，点击一下，新增一张图片添加。但只能添加一行，我要求是整个表格。
代码如下
<table width="98%" border="0" cellpadding="0" cellspacing="1">
<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>
要求建一个JS，通过botton按钮新增出这一个表格来，最好可以增加，也可以删除，如能帮忙给全分
能否给一个完整的示例，谢谢 展开
代码如下
<table width="98%" border="0" cellpadding="0" cellspacing="1">
<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>
要求建一个JS，通过botton按钮新增出这一个表格来，最好可以增加，也可以删除，如能帮忙给全分
能否给一个完整的示例，谢谢 展开
4个回答
展开全部
<html>
<head>
<title>test</title>
<meta http-equiv="content-Type" content="text/html;charset=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>
<head>
<title>test</title>
<meta http-equiv="content-Type" content="text/html;charset=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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2015-07-27 · 知道合伙人软件行家
emeipanda
知道合伙人软件行家
采纳数：329
获赞数：1494
曾获联想、华为、Juniper认证,现任职于四川省内江市GPS卫星监控中心总工程师，主持技术管理工作逾10年。
向TA提问 私信TA
关注
![]()
展开全部
第一，可以用层的显示/隐藏 控制表格（表格其实是事先创建好的）。
第二，可以动态创建表格，createElement("...")。
具体实现方法可以在网上查查。
第二，可以动态创建表格，createElement("...")。
具体实现方法可以在网上查查。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把表格提前写到隐藏域里面，点击按钮是进行显示。是这样效果吗谢谢
使用js切换显示div表格，效果实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
添加一个属性onclick='document.body.innerHTML+="......";'
........是你表格的代码
........是你表格的代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
