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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
详解express使用vue-router的history踩坑
Jun 05 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php下连接mssql2005的代码
2011/01/17 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python面向对象 反射原理解析
2019/08/12 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python如何判断IP地址合法性
2020/04/05 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
渔夫的故事教学反思
2014/02/14 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
python 模块重载的五种方法
2021/04/24 Python
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL