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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
JavaScript中reduce()的用法
May 11 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php数组使用规则分析
2015/02/27 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python回调函数中使用多线程的方法
2017/12/25 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
摄影助理岗位职责
2014/02/07 职场文书
yy生日主持词
2014/03/20 职场文书
一岗双责责任书
2014/04/15 职场文书
银行授权委托书格式
2014/10/10 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年维修工作总结
2014/11/22 职场文书
2015年团支书工作总结
2015/04/03 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis