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 01 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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实现转盘抽奖算法分享
2020/04/15 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
申论倡议书范文
2014/05/13 职场文书
班级口号大全
2014/06/09 职场文书
政风行风评议整改方案
2014/09/15 职场文书
员工试用期自我评价
2014/09/18 职场文书
社区好人好事材料
2014/12/26 职场文书
公司新员工欢迎词
2015/09/30 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
基于python制作简易版学生信息管理系统
2021/04/20 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers