jQuery로 폼과 테이블을 조작하는 방법

이번에는 jQuery를 사용하여 양식과 테이블은 물론 다른 응용 프로그램을 작동하는 방법을 보여 드리겠습니다.

1. 폼 적용

폼에는 세 가지 기본 구성요소가 있습니다.

(1) 폼 태그: 폼 데이터를 처리하는 데 사용되는 서버측 프로그램 URL과 데이터를 서버에 제출하는 방법이 포함됩니다.
(2) 양식 필드: 텍스트 상자, 비밀번호 상자, 숨겨진 필드, 여러 줄 텍스트 상자, 확인란, 라디오 버튼 상자, 드롭다운 선택 상자 및 텍스트 업로드 상자 등을 포함합니다.
(3) 양식 버튼: 제출 버튼, 재설정 버튼 및 일반 버튼을 포함하며 서버로 데이터를 전송하거나 전송을 취소하는 데 사용되며 정의된 처리 스크립트를 사용하여 다른 처리 작업을 제어하는 ​​데에도 사용할 수 있습니다.
1. 한 줄 텍스트 상자 적용
텍스트 상자에 초점이 맞춰지면 색상을 변경해야 합니다. 초점을 잃으면 CSS에서 의사 클래스 선택기를 사용할 수 있습니다. 위의 기능을 구현하기 위한 CSS 코드는 다음과 같습니다.

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

그러나 IE6에서는 하이퍼링크 요소를 제외하고 :hover 의사 클래스 선택기를 지원하지 않습니다. 이를 보완하기 위해 jQuery를 사용할 수 있습니다. . 여러 줄 텍스트 상자 적용

높이 변경: 클릭 이벤트를 "확대" 및 "축소" 버튼에 바인딩하면 해당 텍스트 상자의 높이도 확대되거나 축소됩니다. 스크롤 막대 높이 변경: "위로" 및 "아래로" 버튼을 통해 클릭 이벤트 바인딩
3. 체크박스 애플리케이션

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

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

4. 드롭다운 상자 애플리케이션

왼쪽 테두리에서 오른쪽 테두리로 옵션 추가:

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

5. 양식 확인

확인 사용자 이름:

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

확인 이메일과 동일
제출 이벤트:

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

2. 테이블 적용

1. 일반 인터레이스 색상 변경: rr 리
라디오 버튼은 테이블의 대체 행 강조 표시를 제어합니다.

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

2. 테이블 확장 및 닫기

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

3 테이블 내용 필터링

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

위 내용은 jQuery로 폼과 테이블을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!