5.2 《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）

1. 表格隔行变色以及单选/复选
2. 表格展开关闭
3. 表格筛选
4. 字体变大/缩小
5. 选项卡
6. 网页换肤

tip1：

$("tr:odd")和$("tr:even")选择器索引是从0开始的，因此第1行是偶数

1、表格隔行变色以及单选/复选

.even{background-color: #fff38f;} /*偶数行样式*/
.odd{ background-color: #dcdcdc;} /*奇数行样式*/
.selected{ background-color:#ff4136; }

    <table>
        <thead>
        <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
        <tr><td><input name="sel" type="checkbox"></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input name="sel" type="checkbox" checked></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td><input name="sel" type="checkbox"></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>
        <tr><td><input name="sel" type="checkbox"></td><td>赵六</td><td>男</td><td>浙江温州</td></tr>
        <tr><td><input name="sel" type="checkbox"></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
        <tr><td><input name="sel" type="checkbox"></td><td>MAXMAX</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>

$(function(){
//    表格隔行变色
    $("tbody>tr:odd").addClass("odd");
    $("tbody>tr:even").addClass("even");
//    控制行高亮显示
//    $("tr:contains('王五')").addClass("selected");
//    选择行单选
//    初始化默认选中
//    $("table :radio:checked").parents("tr").addClass("selected"); //或者
//    $("tbody>tr:has(:checked)").addClass("selected");
//    $("tbody>tr").click(function(){
//        $(this).addClass("selected")
//                .siblings().removeClass("selected")
//                .end()
//                .find(":radio").prop("checked",true);
//    });
//    选择行多选
//      初始化默认选中
//    $("table :checkbox:checked").parents("tr").addClass("selected"); //或者
    $("tbody>tr:has(:checked)").addClass("selected");
    $("tbody>tr").click(function(){
        var hasSelected=$(this).hasClass("selected");
        $(this)[hasSelected?"removeClass":"addClass"]("selected")  //三元运算，结果为"removeClass"或者"addClass"
                .find(":checkbox").prop("checked",!hasSelected);
    })
})

2、表格展开关闭

    <table>
        <thead>
        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
            <tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
            <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="child_row_02"><td>赵六</td><td>男</td><td>浙江温州</td></tr>
            <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
            <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr class="child_row_03"><td>MAXMAX</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>

$(function(){
    $("tr.parent").click(function(){
        $(this).toggleClass("selected")
                .siblings(".child_"+this.id).toggle();
    }).click();     //页面加载时即触发click事件，默认收缩
})

3、表格筛选

$(function(){
    $("#filterName").keyup(function(){
        $("table tbody tr").hide()
                .filter(":contains('"+($(this).val())+"')").show();
    }).keyup(); //防止刷新表单其值保持不变，因此，需DOM加载完成时即触发keyup事件
})

4、字体变大/缩小

 <div class="msg">
       <div class="msg_caption">
           <span class="bigger">放大</span>
           <span class="smaller">缩小</span>
       </div>
       <div>
           <p id="para">
                文字大小文字大小文字大小
           </p>
       </div>
   </div>

$(function(){
    $("span").click(function(){
        var thisEle=$("#para").css("font-size");
        var textFontSize=parseInt(thisEle,10);  //去掉单位获取10进制
        var unit=thisEle.slice(-2);  //返回字符串中从指定的字符开始的一个字符串。-2表示倒数第2个字符开始
        var cName=$(this).attr("class");
        if(cName=="bigger"){
            if(textFontSize<=22) {
                textFontSize += 2;
            }
        }else if(cName=="smaller"){
            if(textFontSize>=10) {
                textFontSize -= 2;
            }
        }
        $("#para").css("font-size",textFontSize+unit);
    })
})

5、选项卡

.tab_menu li{padding: 5px 18px; float: left; border: 1px solid #dcdcdc; margin-right: -1px; cursor: pointer;}
.tab_menu li.selected{border-bottom: 1px solid #fff;}
.tab_menu li.hover{ color: red;}

    <div class="tab">
        <div class="tab_menu">
            <ul class="fix">
                <li class="selected">时事</li>
                <li>娱乐</li>
                <li>体育</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>时事</div>
            <div class="dn">娱乐</div>
            <div class="dn">体育</div>
        </div>
    </div>

$(function(){
    var $div_li=$("div.tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass("selected")
                .siblings().removeClass("selected");
        var index=$div_li.index(this);
        $("div.tab_box>div")
                .eq(index).show()
                .siblings().hide();
    }).hover(function(){         //加强效果添加hover事件
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    });
});

6、网页换肤

<link rel="stylesheet" id="cssfile" type="text/css" href="css/skin_0.css">

    <ul id="skin" class="fix">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="蓝色">蓝色</li>
        <li id="skin_3" title="红色">红色</li>
    </ul>
    <div class="content">
        <p>内容颜色</p>
    </div>

<script src="js/jquery.cookie.js"></script>
<script>
    $(function () {
        var $li = $("#skin li");
        $li.click(function () {
            switchSkin(this.id);
        })
        var cookie_skin = $.cookie("MyCssSkin");
        if (cookie_skin) {
            switchSkin(cookie_skin);
        }
    });
    function switchSkin(skinName) {
        $("#" + skinName).addClass("selected")
                .siblings().removeClass("selected");
        $("#cssfile").attr("href", "css/" + skinName + ".css");
        $.cookie("MyCssSkin", skinName, {path: '/', expires: 10});
    }
</script>