JS 如何点击按钮添加整个表格

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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按钮新增出这一个表格来，最好可以增加，也可以删除，如能帮忙给全分
能否给一个完整的示例，谢谢

参考技术A <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> 参考技术B 第一，可以用层的显示/隐藏控制表格（表格其实是事先创建好的）。
第二，可以动态创建表格，createElement("...")。
具体实现方法可以在网上查查。参考技术C

把表格提前写到隐藏域里面，点击按钮是进行显示。是这样效果吗谢谢

使用js切换显示div表格，效果实现

参考技术D 添加一个属性onclick='document.body.innerHTML+="......";'

........是你表格的代码

JS动态增加删除表格的问题大家救救我吧

我JS白痴，今天又遇到这么个难题，请大家能帮助我一下，能帮我解决问题，我愿意把剩下的二百财富值也赠送（就这么多了，实在没办法了），先谢谢大家了

1.点击增加一所学校，可以增加一个学校模块,也就是红框所标出的整个表格会增加到下面，并且出现删除一所学校按钮，
点击删除一所学校，可以删除一整个表格
2.在每个学校表格中，点击增加，可以增加一行并且出现删除按钮，如蓝色框所示，点击删除可以删除一行
3.每个学校增加的行数要用隐藏域表单记录下来，以方便添加至数据库
代码太长了，好像贴不完