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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP解决中文乱码
2017/04/28 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
node.js中watch机制详解
2014/11/17 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Linux操作面试题
2015/02/11 面试题
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
优秀学生评语大全
2014/04/25 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书