jQuery学习笔录9（jQuery中的Table操作）

最新推荐文章于 2018-01-17 14:52:29 发布

壁橱里的老王

最新推荐文章于 2018-01-17 14:52:29 发布

阅读量2.1k

点赞数

分类专栏： jQuery javascript CSS Web 文章标签： jquery table function class input server

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7644470

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

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

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔录9（jQuery中的Table操作）

1jQuery(function(){}) 或$(function(){}); 它是$(document).ready() 的简写 2 even偶数，odd 奇数 3 siblings（）， > ,find() , addClass() ,removeClass() , css() , 多个 : ,:contains()选中的行，高亮 Untitled Pag
复制链接

扫一扫