Comment utiliser des formulaires et des tables avec jQuery

Cette fois, je vais vous montrer comment utiliser jQuery pour faire fonctionner des formulaires, des tableaux et quelques autres applications. Suivez l'éditeur et jetez un œil.

1. Application de formulaire

Un formulaire comporte trois composants de base :

(1) Balise de formulaire : contient le côté serveur utilisé pour traiter les données du formulaire. L'URL du programme et la méthode de soumission des données au serveur.
(2) Champs de formulaire : y compris les zones de texte, les zones de mot de passe, les champs masqués, les zones de texte multilignes, les cases à cocher, les cases de boutons radio, les zones de sélection déroulantes et les zones de téléchargement de texte, etc.
(3) Boutons de formulaire : y compris le bouton de soumission, le bouton de réinitialisation et le bouton général, utilisés pour transférer des données vers le serveur ou annuler le transfert, et peuvent également être utilisés pour contrôler d'autres tâches de traitement avec des scripts de traitement définis.
1. Application de zone de texte sur une seule ligne
Lorsque la zone de texte obtient le focus, sa couleur doit changer. Lorsqu'elle perd le focus, elle doit revenir à son style d'origine. le pseudo style dans le sélecteur de classe CSS pour réaliser les fonctions ci-dessus, le code CSS est le suivant :

input:focus ,textarea:focus{ 
   border:1px solid #f00;  
     background:#fcc;}

Cependant, IE6 ne prend pas en charge le sélecteur de pseudo-classe :hover autre que les éléments de lien hypertexte. , vous pouvez utiliser jQuery pour compenser :

.focus{
    border:1px solid #f00;
    background:#fcc;
}
$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    });
});

2. Application de zone de texte multiligne
Changement de hauteur : liez les événements de clic via le "zoom avant" et boutons « zoom arrière », et la hauteur de la zone de texte correspondante sera également agrandie ou effectuer un zoom arrière.
Changement de hauteur de la barre de défilement : liez les événements de clic via les boutons "Haut" et "Bas"
3. Application de case à cocher

$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').attr('checked',true);  //复选框全选，全不选设置为false});

$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        $(this).attr("checked", !$(this).attr("checked"));  //反选
    });
});

4. . Application de liste déroulante
Ajoutez les options du cadre de gauche au cadre de droite :

('#add').click(function(){
    var $options=$('#select1 options:selected');  //获取全部的选项
    $options.appendTo('#select2');  //追加给对方})

Vérification du formulaire
Vérifiez le nom d'utilisateur :

if($(this).is('#username')){  
  if(this.value==""||this.value.length<6){     
     var errorMsg=&#39;请输入至少6位的用户名&#39;；
        $parent.append(&#39;<span clsaa="formtips onError">&#39;+errorMsg+&#39;</span>&#39;);
    }else{      
      var okMsg=&#39;输入正确&#39;；
        $parent.append(&#39;<span class="formtips onSuccess">&#39;+okMsg+&#39;</span>&#39;);
    }
}

Il en va de même pour la vérification du courrier électronique
Soumettre l'événement :

$('#send').click(function(){
    $("form.required:input").trigger('blur');  
      var numError=$('form.onError').length; 
         if(numError){    
             return false;
    }
    alert("注册成功，密码已发到你的邮箱，请查收");
});

2. Formulaire de demande
1. change de couleur
Changement de couleur des lignes entrelacées ordinaires :

$(function(){
    $("tbody>tr:odd").addClass("odd");  //给表格中奇数行添加样式
    $("tbody>tr:even").addClass("even"); //给表格中偶数行添加样式})

Mise en surbrillance des lignes entrelacées de la table de contrôle des boutons radio :

$('tbody>tr').click(function(){
    $(this)
        .addClass('selected')   //给单击的当前行添加高亮样式
        .siblings().removeClass('selected') //将兄弟行的高亮模式去掉，执行完对象变为$(this).sibling()
        .end()  //返回$(this)对象
        .find(':radio').attr('checked',true); //将此行所在的单选框也选中});

2. 🎜>

$(function(){
    $('tr.parent').click(function(){   //获取所谓的父行
        $(this)
        .toggleClass("selected")    //添加/删除高亮
        .siblings('.child_'+this.id).toggle();  //隐藏/显示所谓的子行
    }).click();  //当用户刚进入界面时默认收缩起来})

3 Filtrage du contenu des tableaux

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!