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 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
javascript动画浅析
2012/08/30 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
详解Python迭代和迭代器
2016/03/28 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
学生拾金不昧表扬信
2014/01/21 职场文书
中药专业自荐信范文
2014/03/18 职场文书
留学推荐信范文
2014/05/10 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
详解Python中的进程和线程
2021/06/23 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫