jQuery implémente le partage de méthodes de montée, de descente, de suppression et d'ajout d'une ligne de code-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-23 14:04:59

original

2097 Les gens l'ont consulté

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(){
 //添加一行
 $(&#39;#addTableRow&#39;).on(&#39;click&#39;,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());
 });
}

Copier après la connexion

Obtenir l'effet