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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
JS敏感词过滤代码
Dec 23 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
js实现无缝轮播图效果
Mar 09 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 面向对象 PHP5 中的常量
2010/05/05 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python 实现归并排序算法
2012/06/05 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
《春晓》教学反思
2014/04/20 职场文书
《春雨》教学反思
2014/04/24 职场文书
婚前保证书
2014/04/29 职场文书
汽车专业求职信
2014/06/05 职场文书
经济管理自荐书
2014/06/09 职场文书
家长高考寄语
2015/02/27 职场文书
创业计划书详解
2019/07/19 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL