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 相关文章推荐
JS 统计时间
Mar 09 Javascript
JS 时间显示效果代码
Aug 23 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
js操作数组函数实例小结
Dec 10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python Merge函数原理及用法解析
2020/09/16 Python
公司领导班子对照材料
2014/08/18 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
警示教育观后感
2015/06/17 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang