jQuery学习笔录9(jQuery中的Table操作)

 
 
 1jQuery(function(){}) 或$(function(){});  它是$(document).ready() 的简写

 2 even偶数  ,odd 奇数

 3 siblings(), >  ,find() , addClass() ,removeClass() , css() , 多个 :  ,:contains()

选中的行,高亮

<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    <style type="text/css">
        .even{ background:#fff38f;}
        .odd{background:green;}
        .hightLight{background:pink;}
    </style>
</head>
<body>
  <table>
    <thead>
        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
        <tr class="odd"><td><input type="radio" /></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="even"><td><input type="radio" /></td><td>里斯</td><td>女</td><td>浙江郑州</td></tr>
        <tr class="odd"><td><input type="radio" /><td>爱喜</td><td>男</td><td>浙江温州</td></tr>
        <tr class="even"><td><input type="radio" /><td>松松</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="odd"><td><input type="radio" /><td>耳环</td><td>nv</td><td>浙江杭州</td></tr>
    </tbody>
  </table>
</body>
</html>
<script>
    $(function(){
//        $("tr:.odd").addClass("odd");//这是过滤类
//        $("tr:.even").addClass("even");
//        $("tr:odd").addClass("odd"); //这个选择器中索引时从0开始的,但是把表头也算进去了;
//        $("tr:even").addClass("even");
        $("tbody:tr:odd").addClass("odd");//把标题过掉
        $("tbody:tr:even").addClass("even");
        $("tr:contains('松松')").css("background","pink");//高亮”松松“
        $("tbody>tr").click(function(){
            $(this).addClass("hightLight")
            .siblings().removeClass("hightLight").end()
            .find("input[type=radio]").attr("checked",true);
         // .siblings().find("input[type=radio]").attr("checked",false); //提示错误 not a function
         //原因:这样找到的兄弟节点是基于find找到,找到范围是<td>的
            $(this).siblings().find("input[type=radio]").attr("checked",false);
        })
  
        
    })
</script>

判断checkbox是否被checked上

    $("tbody>tr").click(function(){
        if($(this).find("input[type=checkbox]").attr("checked")==true)
        {
            $(this).addClass("hightLight")
        }
        else
        {
            $(this).revomeClass("hightLight");
        }
    })



你可能感兴趣的:(jquery,function,server,table,Class,input)