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中的常见排序算法
Mar 27 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 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
JS 网站性能优化笔记
2011/05/24 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
移动节点的jquery代码
2014/01/13 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS实现多选框的操作
2020/06/24 Javascript
Python爬豆瓣电影实例
2018/02/23 Python
深入浅析Python传值与传址
2018/07/10 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python对象转换为json的方法步骤
2019/04/25 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
医疗专业毕业生求职信
2014/08/28 职场文书
公司授权委托书样本
2014/09/15 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers