jQuery implémente le partage de méthodes de montée, de descente, de suppression et d'ajout d'une ligne de code

Cet article présente principalement la méthode d'implémentation de jQuery consistant à monter, descendre, supprimer et ajouter une ligne de code. Il est très bon et a une valeur de référence. J'espère que cela pourra aider tout le monde à utiliser jQuery. mieux.

Scénarios d'application :

Tri multi-valeurs, tri par classification et autres opérations

Ce code est implémenté après la pratique, et la mise en œuvre la méthode est simple et ne sera pas perdue (js ajoute une ligne de valeur d'entrée remplie manuellement) la valeur d'entrée

repose sur Jquery et ne repose pas sur d'autres extensions

Code Javascript

/*
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());
 });
}

Obtenir l'effet

Recommandations associées :

A méthode simple pour implémenter le parcours des boîtes de boutons radio avec jQuery

À propos de jquery pour obtenir tous les exemples de valeur et de texte de sélection, option

JQuery partage d'exemples d'idées de conception

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!