jquery 表格的增行删行实现思路 - Web前端
作者：98wpeu发布时间：2026-05-20分类：网页前端技术浏览：7
导读：在做后台中遇到的情况，分享下复制代码代码如下:<!DOCtypehtml><HTML><head><title>表格增行，...
在做后台中遇到的情况，分享下
复制代码 代码如下:
<!DOCtypehtml>
<HTML>
<head>
<title>表格增行，删行处理</title>
<script type="text/javascript" src="http://jt.875.cn/JS/JQuery"></script>
</head>
<body>
<script>
$(function(){
var show_count = 20; //要显示的条数
var count = $("input:text").val(); //递增的开始值，这里是你的ID
var fin_count = parseInt(count) + (show_count-1); //结束递增的条件
$("#BTn_addtr").click(function(){
if(count < fin_count) //点击时候，如果当前的数字小于递增结束的条件
{
$("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行
$("tr:last td input:first").val(++count); //改变添加的行的ID值。
}
});
});
function deltr(){
var length=$("tr").length;
if(length<=2){
alert("至少保留一行");
}else{
$("tr:last").remove();
}
}
</script>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTABle" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
<td></td>
</tr>
<tr>
<div style="background:#ccc;">
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input type="text" name="username" /></td>
<td align="center">
<select name="type">
<option value="1">Administrator</option>
<option value="2">Guest</option>
</select>
</td>
<td align="center"><input type="text" name="username2" /></td>
<td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td>
</div>
</tr>
</table>
</body>
</html>
复制代码 代码如下:
<!DOCtypehtml>
<HTML>
<head>
<title>表格增行，删行处理</title>
<script type="text/javascript" src="http://jt.875.cn/JS/JQuery"></script>
</head>
<body>
<script>
$(function(){
var show_count = 20; //要显示的条数
var count = $("input:text").val(); //递增的开始值，这里是你的ID
var fin_count = parseInt(count) + (show_count-1); //结束递增的条件
$("#BTn_addtr").click(function(){
if(count < fin_count) //点击时候，如果当前的数字小于递增结束的条件
{
$("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行
$("tr:last td input:first").val(++count); //改变添加的行的ID值。
}
});
});
function deltr(){
var length=$("tr").length;
if(length<=2){
alert("至少保留一行");
}else{
$("tr:last").remove();
}
}
</script>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTABle" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
<td></td>
</tr>
<tr>
<div style="background:#ccc;">
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input type="text" name="username" /></td>
<td align="center">
<select name="type">
<option value="1">Administrator</option>
<option value="2">Guest</option>
</select>
</td>
<td align="center"><input type="text" name="username2" /></td>
<td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td>
</div>
</tr>
</table>
</body>
</html>
相关推荐
- jquery创建一个ajax关键词数据搜索实现思路 - Web前端
- JQuery入门——移除绑定事件unbind方法概述及应用 - Web前端
- jquery struts 验证唯一标识(公用方法) - Web前端
- jQuery类选择器用法实例 - Web前端
- 60个很实用的jQuery代码开发技巧收集 - Web前端
- jquery简单瀑布流实现原理及ie8下测试代码 - Web前端
- jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误 - Web前端
- jQuery链式操作如何实现以及为什么要用链式操作 - Web前端
- jquery offset函数应用实例 - Web前端
- jquery插件制作 提示框插件实现代码 - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性