jquery动态增加删减表格行特效


Posted in Javascript onNovember 20, 2015

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery动态增加删减表格行特效

具体代码如下:

html代码:

<div style="width:720px;margin:20px auto;">
   <table id="tab11" style="display: none">
     <tbody>
       <tr>
         <td height="30" align="center">
           <input type="text" name="NO" size="2" value="1" />
         </td>
         <td align="center">
           <input type="text" name="start_end_time" />
         </td>
         <td align="center">
           <input type="text" name="unit_department" />
         </td>
         <td align="center">
           <input type="text" name="post" />
         </td>
         <td>
           <input type="button" id="Button1" onclick="deltr(this)" value="删行" />
         </td>
       </tr>
     </tbody>
   </table>
   <input type="button" id="btn_addtr" value="增行" />
   <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
     <thead>
       <tr>
         <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
         <td align="center" bgcolor="#CCCCCC">起止时间</td>
         <td align="center" bgcolor="#CCCCCC">单位/部门</td>
         <td align="center" bgcolor="#CCCCCC">职位</td>
         <td></td>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td height="30" align="center">
           <input type="text" name="NO" size="2" value="1" />
         </td>
         <td align="center">
           <input type="text" name="start_end_time" />
         </td>
         <td align="center">
           <input type="text" name="unit_department" />
         </td>
         <td align="center">
           <input type="text" name="post" />
         </td>
         <td>
           <input type="button" id="Button2" onclick="deltr(this)" value="删行" />
         </td>
       </tr>
     </tbody>
   </table>
 </div>

js代码:

$(function () {
      var show_count = 20;  //要显示的条数
      var count = 1;  //递增的开始值,这里是你的ID
      $("#btn_addtr").click(function () {
 
        var length = $("#dynamicTable tbody tr").length;
        //alert(length);
        if (length < show_count)  //点击时候,如果当前的数字小于递增结束的条件
        {
          $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");  //在表格后面添加一行
          changeIndex();//更新行号
        }
      });
 
 
    });
    function changeIndex() {
      var i = 1;
      $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
        $(this).find("input[name='NO']").val(i++);//更新行号
      });
    }
 
    function deltr(opp) {
      var length = $("#dynamicTable tbody tr").length;
      //alert(length);
      if (length <= 1) {
        alert("至少保留一行");
      } else {
        $(opp).parent().parent().remove();//移除当前行
        changeIndex();
      }
    }

希望本文所述对大家学习javascript成程序设计有所帮助。

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
跟我学习javascript的异步脚本加载
Nov 20 #Javascript
JavaScript获取各大浏览器信息图示
Nov 20 #Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 #Javascript
跟我学习javascript的最新标准ES6
Nov 20 #Javascript
详解JavaScript语言的基本语法要求
Nov 20 #Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 #Javascript
js鼠标点击图片切换效果实现代码
Nov 19 #Javascript
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
js回调函数仿360开机
2019/12/26 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
python复制文件的方法实例详解
2015/05/22 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python 读取.nii格式图像实例
2020/07/01 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python中如何打包用户自定义模块
2020/09/23 Python
python实现简单文件读写函数
2021/02/25 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
行政管理专业求职信
2014/07/06 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书