This article mainly introduces the jQuery implementation method of rising, falling, deleting, and adding a line of code. It is very good and has reference value. Friends in need can refer to it. I hope it can help everyone use jQuery better.
Application scenarios:
Multi-value sorting, classification sorting and other operations
This code is implemented after practice, and the implementation method is simple and Will not be lost (js adds a line of manually filled Input value) input value
Depends on Jquery, does not rely on other extensions
Javascript code
/* 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()); }); }
Achieve the effect
##Related recommendations:JQuery simple method to implement traversal of radio button boxes
About jquery to obtain all value and text examples of select, option
JQuery design idea example sharing
The above is the detailed content of jQuery implementation of rising, falling, deleting, adding a line of code method sharing. For more information, please follow other related articles on the PHP Chinese website!