jQuery实现上升、下降、删除、添加一行代码

应用场景：

多值排序、分类排序等操作

此代码是经过实践后，实现方法简洁，而且不会丢失（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">&#xe679;</i>上升</a> <a class="sortDown"><i class="Hui-iconfont">&#xe674;</i>下降</a> <a class="sortDel"><i class="Hui-iconfont">&#xe609;</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 # 实现上升下降 # jquery实现删除添加 # 使用jquery给指定的table动态添加一行、删除一行 # jQuery实现表格行和列的动态添加与删除方法【测试可用】 # jQuery添加和删除输入文本框标签代码 # 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 # jQuery添加删除DOM元素方法详解 # jQuery添加和删除指定标签的方法 # 基于jquery实现select选择框内容左右移动添加删除代码分享 # 小编 # 在此 # 给大家 # 所述 # 顶了 # 填入 # 给我留言 # 感谢大家 # 疑问请 # 有任何 # 不依赖 # var # preventDefault # table # tableAttr # click # function # gt # td # type

返回目录在线咨询

上一篇：下载php源码怎么运行_下载php源码运行环境搭建与执行【指南】
下一篇：Python上下文管理器怎么写_with语句实战说明【指导】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery实现 上升、下降、删除、添加一行代码

您的项目需求

jQuery实现上升、下降、删除、添加一行代码