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 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
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/07/04 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP会话控制实例分析
2016/12/24 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Python变量和字符串详解
2017/04/29 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
电厂厂长岗位职责
2014/01/02 职场文书
售后服务承诺书模板
2014/05/21 职场文书
文艺晚会策划方案
2014/06/11 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Python OpenGL基本配置方式
2022/05/20 Python