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中两种链式调用实现代码
Jan 12 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python实现Flappy Bird源码
2018/12/24 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python笔记之工厂模式
2019/11/20 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python如何读写CSV文件
2020/08/13 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
园林资料员岗位职责
2013/12/30 职场文书
文秘人员工作职责
2014/01/31 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python