jQuery-Implementierung zum Teilen von steigenden, fallenden, gelöschten und hinzugefügten Codezeilen

In diesem Artikel wird hauptsächlich die jQuery-Implementierungsmethode zum Heben, Senken, Löschen und Hinzufügen einer Codezeile vorgestellt. Sie ist sehr gut und hat einen Referenzwert. Ich hoffe, sie kann jedem helfen, jQuery zu verwenden besser.

Anwendungsszenarien:

Mehrwertsortierung, Klassifizierungssortierung und andere Vorgänge

Dieser Code wird nach Übung und Implementierung implementiert Die Methode ist einfach und geht nicht verloren (js fügt eine Zeile mit manuell ausgefülltem Eingabewert hinzu). Eingabewert

basiert auf Jquery und nicht auf anderen Erweiterungen

Javascript-Code

/*
addTableRow 为添加一行按钮的id值
tableAttr 为table的id值
*/
$(function(){
 //添加一行
 $('#addTableRow').on('click',function(e){
  e.preventDefault();
  var _Html = &#39;<tr><td><input type="text" placeholder="" class="input-text" value=""></td>&#39;
    + &#39;<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>&#39;;
  $(&#39;tbody&#39;, $(&#39;#tableAttr&#39;)).append(_Html);
  bindEvent();
 });
 bindEvent();
});
function bindEvent(){
 $(&#39;.sortDel,.sortUp,.sortDown&#39;).off();
 $(&#39;.sortDel&#39;).on(&#39;click&#39;, function(e) {
  e.preventDefault();
  if (confirm("确定要删除该属性？")) {
   $(this).parents(&#39;tr&#39;).remove();
  }
 });
 // 初始化上升按钮
 $(&#39;.sortUp&#39;).on(&#39;click&#39;, function(e) {
  e.preventDefault();
  var _current = $(this).parents(&#39;tr&#39;);
  if(($(&#39;tr&#39;).index(_current) - 2) >= 0) {
   _current.insertBefore(_current.prev());
  } else {
   alert("已经到顶了");
  }
 });
 // 初始化下降按钮
 $(&#39;.sortDown&#39;).on(&#39;click&#39;, function(e) {
  e.preventDefault();
  var _current = $(this).parents(&#39;tr&#39;);
  _current.insertAfter(_current.next());
 });
}

Erzielen Sie die Wirkung

Verwandte Empfehlungen:

A einfache Methode zum Implementieren des Durchlaufens von Optionsfeldern mit jQuery

Über JQuery, um alle Werte und Textbeispiele von select, option zu erhalten

JQuery Teilen von Beispielen für Designideen

Das obige ist der detaillierte Inhalt vonjQuery-Implementierung zum Teilen von steigenden, fallenden, gelöschten und hinzugefügten Codezeilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!