jQuery实现 上升、下降、删除、添加一行代码


Posted in Javascript onMarch 06, 2017

应用场景:

多值排序、分类排序等操作

此代码是经过实践后,实现方法简洁,而且不会丢失(js添加一行人工填入的Input值)input值

依赖Jquery,不依赖其它扩展

Javascript代码

/*
addTableRow 为添加一行按钮的id值
tableAttr 为table的id值
*/
$(function(){
 //添加一行
 $('#addTableRow').on('click',function(e){
  e.preventDefault();
  var _Html = '<tr><td><input type="text" placeholder="" class="input-text" value=""></td>'
    + '<td><a class="sortUp"><i class="Hui-iconfont"></i>上升</a> <a class="sortDown"><i class="Hui-iconfont"></i>下降</a> <a class="sortDel"><i class="Hui-iconfont"></i>删除</a></td></tr>';
  $('tbody', $('#tableAttr')).append(_Html);
  bindEvent();
 });
 bindEvent();
});
function bindEvent(){
 $('.sortDel,.sortUp,.sortDown').off();
 $('.sortDel').on('click', function(e) {
  e.preventDefault();
  if (confirm("确定要删除该属性?")) {
   $(this).parents('tr').remove();
  }
 });
 // 初始化上升按钮
 $('.sortUp').on('click', function(e) {
  e.preventDefault();
  var _current = $(this).parents('tr');
  if(($('tr').index(_current) - 2) >= 0) {
   _current.insertBefore(_current.prev());
  } else {
   alert("已经到顶了");
  }
 });
 // 初始化下降按钮
 $('.sortDown').on('click', function(e) {
  e.preventDefault();
  var _current = $(this).parents('tr');
  _current.insertAfter(_current.next());
 });
}

实现效果

jQuery实现 上升、下降、删除、添加一行代码

以上所述是小编给大家介绍的jQuery实现 上升、下降、删除、添加一行代码的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
vue之延时刷新实例
Nov 14 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 #Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 #Javascript
js实现4个方向滚动的球
Mar 06 #Javascript
Bootstrap输入框组件简单实现代码
Mar 06 #Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 #Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 #Javascript
Bootstrap表单简单实现代码
Mar 06 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python如何实现异步调用函数执行
2019/07/08 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
世界经理人咨询有限公司面试
2014/09/23 面试题
大一自我鉴定范文
2013/10/04 职场文书
房屋委托书范本
2014/04/04 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
课外活动实习计划
2015/01/19 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
python实现过滤敏感词
2021/05/08 Python
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android