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 相关文章推荐
使用正则替换变量
May 05 Javascript
心扬JS分页函数代码
Sep 10 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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地址引用(php地址引用的效率问题)
2012/03/23 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP简单日历实现方法
2016/07/20 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
angular分页指令操作
2017/01/09 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
产品推广策划方案
2014/05/10 职场文书
婚前协议书范本
2014/10/27 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
十二生肖观后感
2015/06/12 职场文书
读书笔记怎么写
2015/07/01 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Python何绘制带有背景色块的折线图
2022/04/23 Python