Heim > Web-Frontend > js-Tutorial > jQuery-Implementierung zum Teilen von steigenden, fallenden, gelöschten und hinzugefügten Codezeilen

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

小云云
Freigeben: 2018-01-23 14:04:59
Original
2098 Leute haben es durchsucht

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());
 });
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage