Maison > interface Web > js tutoriel > le corps du texte

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
2090 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(){
 //添加一行
 $('#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());
 });
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal