jQuery中有关表单、表格的操作

jQuery对表单、表格的操作

表单应用

单行文本框应用

文本框获取获取和失去焦点改变样式。
首先在CSS中添加一个类名为focus的样式：

.focus{
    border:1px solid #f00;
    background:#fcc;
}

然后为文本框添加获取和失去焦点的事件

$(function(){
    $("input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    });
});

多行文本框应用

高度变化：jQuery代码

$(function(){
    var $comment = $("#comment");
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height() < 500){
                $comment.animate({height:"+=50"},400);
            }
        }
    });
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height() > 50 ){
                $comment.animate({height:"-=50"},400);
            }
        }
    });
});

滚动条变化：jQuery代码：

$(function(){
    var $comment = $("#comment");
    $(".up").click(function(){
        if(!$comment.is(":animated")){
            $comment.animate({scrollTop:"-=50"},400);
        }
    });
    $(".down").click(function(){
        if(!$comment.is(":animated")){
            $comment.animate({scrollTop:"+=50"},400);  
        }
    });
});

复选框应用

全选：

$("#checkedAll").click(function(){
    $("[name=items]:checkbox").attr("checked":true);
});

全不选：

$("#checkedNo").click(function(){
    $("[name=items]:checkbox").attr("checked":false);
});

反选：

$("#checkedRev").click(function(){
    $("[name=items]:checkbox").each(function(){
        this.checked = !this.checked;
    });
});

提交：

$("#send").click(function(){
    var str = "你选中的是："；
    $("[name=items]:checkbox:checked").each(function(){
        str = str + $(this).val();
    });
    alert(str);
});

表格应用

表格变色

普通的隔行变色：
CSS代码：

.even{background:#fff38f};
.odd{background:#ffffee};

jQuery代码：

$(function(){
    $("tr:odd").addClass("odd");
    $("tr:even").addClass("even");
});