jquery 表格的增行删行实现思路


Posted in Javascript onMarch 21, 2013

在做后台中遇到的情况,分享下

<!DOCTYPE html> 
<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>
Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
vue二级路由设置方法
Feb 09 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
js禁止document element对象选中文本实现代码
Mar 21 #Javascript
JS获取并操作iframe中元素的方法
Mar 21 #Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 #Javascript
js 验证密码强弱的小例子
Mar 21 #Javascript
javascript中日期转换成时间戳的小例子
Mar 21 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
中层干部岗位职责
2013/12/18 职场文书
计算机个人求职信范例
2014/01/24 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
带病坚持工作事迹
2014/05/03 职场文书
篮球赛口号
2014/06/18 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
大学生求职意向书
2015/05/11 职场文书
文艺节目主持词
2015/07/06 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技