jQueryでフォームやテーブルを操作する方法

今回は、jQueryを使用してフォームやテーブルを操作する方法と、その他のアプリケーションをいくつか紹介します。エディターに従って見てみましょう。

1. フォーム アプリケーション

フォームには 3 つの基本コンポーネントがあります:

(1) フォーム タグ: フォーム データの処理に使用されるサーバー側プログラムの URL と、データをサーバーに送信するメソッドが含まれます。
(2) フォームフィールド: テキストボックス、パスワードボックス、隠しフィールド、複数行テキストボックス、チェックボックス、ラジオボタンボックス、ドロップダウン選択ボックス、テキストアップロードボックスなどを含みます。
(3) フォーム ボタン: 送信ボタン、リセット ボタン、および一般ボタンを含み、サーバーへのデータの転送または転送のキャンセルに使用され、定義された処理スクリプトを使用して他の処理タスクを制御するためにも使用できます。
1. 単一行のテキスト ボックス アプリケーション テキスト ボックスがフォーカスを取得すると、その色を変更する必要があり、CSS で疑似クラス セレクターを使用できます。上記の機能を実現するための CSS コードは次のとおりです:

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

ただし、IE6 はハイパーリンク要素を除いて :hover 疑似クラス セレクターをサポートしていません。これを補うために jQuery を使用できます:

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

2 . 複数行のテキスト ボックス アプリケーション 高さの変更: クリック イベントを「拡大」ボタンと「縮小」ボタンにバインドすると、対応するテキスト ボックスの高さも拡大または縮小されます。
スクロール バーの高さの変更: 「上」と「下」ボタンを使用してクリック イベントをバインドします

3. チェックボックス アプリケーション

$("#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. ドロップダウン ボックス アプリケーション 左の境界線から右の境界線にオプションを追加します。

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

5. フォーム検証

検証ユーザー名:

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

検証メールと同じ:

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

2. テーブルアプリケーション

1. テーブルカラー変更
通常のインターレースカラー変更: れーれーラジオ ボタンは、テーブル内の代替行の強調表示を制御します:

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

2. テーブルを展開して閉じる

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

3 テーブルの内容をフィルタリングします

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

以上がjQueryでフォームやテーブルを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。