jquery动态增加删除表格行的小例子


Posted in Javascript onNovember 14, 2013
<script src="jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body{background:#FFFFFF;}
</style>
</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>
    <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>
  </tr>
</table>
</body>
Javascript 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
ie focus bug 解决方法
Sep 03 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vue-router源码之history类的浅析
May 21 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
js取消单选按钮选中并判断对象是否为空
Nov 14 #Javascript
Javascript call和apply区别及使用方法
Nov 14 #Javascript
javascript 上下banner替换具体实现
Nov 14 #Javascript
javascript scrollTop正解使用方法
Nov 14 #Javascript
简单的Jquery遮罩层代码实例
Nov 14 #Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 #Javascript
You might like
php中常用的预定义变量小结
2012/05/09 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
js密码强度校验
2015/11/10 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
WebPack基础知识详解
2017/01/16 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
node中的密码安全(加密)
2018/09/17 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Python合并多个装饰器小技巧
2015/04/28 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python判断正负数方式
2020/06/03 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
初中英语课后反思
2014/04/25 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
《称赞》教学反思
2016/02/17 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Python闭包的定义和使用方法
2022/04/11 Python