jquery 表格的增行删行实现思路
程序员文章站
2022-05-14 18:24:49
在做后台中遇到的情况，分享下
. 代码如下:
表格增行，删行处理</...</div>
<div class="content">
<p>在做后台中遇到的情况，分享下</p>
<p class="codetitle"><span onclick="docopy('code53771')" style="cursor: pointer"><u>.</u></span> 代码如下:</p>
<p class="codebody" id="code53771"><br>
<!doctype html><br>
<html><br>
<head><br>
<title>表格增行，删行处理</title><br>
<script type="text/javascript" src="https://jt.875.cn/js/jquery"></script><br>
</head><br>
<body><br>
<script><br>
$(function(){<br>
var show_count = 20; //要显示的条数<br>
var count = $("input:text").val(); //递增的开始值，这里是你的id<br>
var fin_count = parseint(count) + (show_count-1); //结束递增的条件<br>
$("#btn_addtr").click(function(){<br>
if(count < fin_count) //点击时候，如果当前的数字小于递增结束的条件<br>
{<br>
$("tr:eq(1)").clone().appendto("table"); //在表格后面添加一行<br>
$("tr:last td input:first").val(++count); //改变添加的行的id值。<br>
}<br>
});<br>
});<br>
function deltr(){<br>
var length=$("tr").length;<br>
if(length<=2){<br>
alert("至少保留一行");<br>
}else{<br>
$("tr:last").remove();<br>
}<br>
}<br>
</script><br>
<input type="button" id="btn_addtr" value="增行"><br>
<table id="dynamictable" width="700" border="0" cellspacing="0" cellpadding="0"><br>
<tr><br>
<td height="30" align="center" bgcolor="#cccccc">id</td><br>
<td align="center" bgcolor="#cccccc">username</td><br>
<td align="center" bgcolor="#cccccc">usertype</td><br>
<td align="center" bgcolor="#cccccc">other</td><br>
<td></td><br>
</tr><br>
<tr><br>
<p style="background:#ccc;"><br>
<td height="30" align="center"><input type="text" size="2" value="1" /></td><br>
<td align="center"><input type="text" name="username" /></td><br>
<td align="center"><br>
<select name="type"><br>
<option value="1">administrator</option><br>
<option value="2">guest</option><br>
</select><br>
</td><br>
<td align="center"><input type="text" name="username2" /></td><br>
<td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td><br>
</p><br>
</tr><br>
</table><br>
</body><br>
</html></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/989431.html">
Linux AIDE(文件完整性检测) </a>
</p>
<p>
下一篇： <a href="/article/989433.html">
jquery实现的网页自动播放声音 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2296474.html" target="_blank" title="表格奇偶行设置不同颜色的核心JS代码_jquery">
<h2>
表格奇偶行设置不同颜色的核心JS代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/2296370.html" target="_blank" title="php怎样把数据库数据循环绑定到一个八行四列的表格里面去呢，知道的老师请说一下思路，谢谢">
<h2>
php怎样把数据库数据循环绑定到一个八行四列的表格里面去呢，知道的老师请说一下思路，谢谢 </h2>
</a>
</li>
<li>
<a href="/article/2230856.html" target="_blank" title="jQuery实现表格的增、删、改操作示例">
<h2>
jQuery实现表格的增、删、改操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2202584.html" target="_blank" title="Vue+Element实现表格编辑、删除、以及新增行的最优方法">
<h2>
Vue+Element实现表格编辑、删除、以及新增行的最优方法 </h2>
</a>
</li>
<li>
<a href="/article/2111681.html" target="_blank" title="jQuery通过点击行来删除HTML表格行的实现示例">
<h2>
jQuery通过点击行来删除HTML表格行的实现示例 </h2>
</a>
</li>
<li>
<a href="/article/2106497.html" target="_blank" title="jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法">
<h2>
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法 </h2>
</a>
</li>
<li>
<a href="/article/2087904.html" target="_blank" title="jQuery实现表格的增、删、改操作示例">
<h2>
jQuery实现表格的增、删、改操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2043247.html" target="_blank" title="Word Excel 实现表格的行列转置将表的行与列互转">
<h2>
Word Excel 实现表格的行列转置将表的行与列互转 </h2>
</a>
</li>
<li>
<a href="/article/2040575.html" target="_blank" title="jQuery实现html table行Tr的复制、删除、计算功能">
<h2>
jQuery实现html table行Tr的复制、删除、计算功能 </h2>
</a>
</li>
<li>
<a href="/article/2035446.html" target="_blank" title="jquery动态增加删除表格行的小例子">
<h2>
jquery动态增加删除表格行的小例子 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>