So bedienen Sie Formulare und Tabellen mit jQuery

Dieses Mal zeige ich Ihnen, wie Sie mit jQuery Formulare und Tabellen und einige andere Anwendungen bedienen. Folgen Sie dem Editor und werfen Sie einen Blick darauf.

1. Formularanwendung

Ein Formular besteht aus drei Grundkomponenten:

(1) Formular-Tag: Enthält die Serverseite, die zur Verarbeitung von Formulardaten verwendet wird Die Programm-URL und die Methode zur Übermittlung von Daten an den Server.
(2) Formularfelder: einschließlich Textfelder, Passwortfelder, versteckte Felder, mehrzeilige Textfelder, Kontrollkästchen, Optionsfelder, Dropdown-Auswahlfelder und Text-Upload-Felder usw.
(3) Formularschaltflächen: einschließlich der Schaltfläche „Senden“, der Schaltfläche „Zurücksetzen“ und der Schaltfläche „Allgemein“, die zum Übertragen von Daten an den Server oder zum Abbrechen der Übertragung verwendet werden und auch zur Steuerung anderer Verarbeitungsaufgaben mit definierten Verarbeitungsskripten verwendet werden können.
1. Einzeilige Textfeldanwendung
Wenn das Textfeld den Fokus erhält, muss es seinen ursprünglichen Stil wiederherstellen Der Pseudo-Stil im CSS-Klassenselektor, um die oben genannten Funktionen zu erreichen, lautet der CSS-Code wie folgt:

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

Allerdings unterstützt IE6 in diesem Fall den :hover-Pseudoklassenselektor nicht , Sie können jQuery verwenden, um dies auszugleichen:

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

2. Mehrzeilige Textfeldanwendung
Höhenänderung: Binden Sie Klickereignisse durch das „Vergrößern“ und Mit den Schaltflächen „Herauszoomen“ wird auch die Höhe des entsprechenden Textfelds vergrößert bzw. verkleinert.
Änderung der Bildlaufleistenhöhe: Binden Sie Klickereignisse über die Schaltflächen „Nach oben“ und „Nach unten“
3. Kontrollkästchenanwendung

$("#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 . Dropdown-Box-Anwendung
Fügen Sie die Optionen vom linken Rahmen zum rechten Rahmen hinzu:

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

5. Überprüfen Sie den Benutzernamen:

Das Gleiche gilt für die Bestätigungs-E-Mail.

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;);
    }
}

Ereignis einreichen:

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

2. Formularantrag

1 ändert die Farbe
Gewöhnliche Farbänderung der Interlaced-Zeile:

Hervorhebung von Interlaced-Zeilen in der Tabelle mit Optionsfeld:

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

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

2. Tabellenerweiterung und -schließung

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

3 Tabelleninhaltsfilterung

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Formulare und Tabellen mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!