jQuery对表格的操作

最新推荐文章于 2024-08-27 01:45:00 发布

chibimarukochan

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量1.7k

点赞数 3

分类专栏： web前端文章标签： jQuery 表格

本文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/93594182

版权

本文介绍了使用jQuery对表格进行操作，包括实现表格的隔行变色、通过单选按钮和复选框控制行高亮、以及表格的展开与关闭功能。此外，还讲解了如何实现表格内容的筛选功能，帮助提升表格交互体验。

摘要由CSDN通过智能技术生成

表格变色

1.普通的隔行变色

HTML代码：

 <table>
       <thead>
          <tr><th>姓名</th><th>性别</th><th>居住地</th></tr>
       </thead>
       <tbody>
            <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td>lisa</td><td>男</td><td>广东深圳</td></tr>
            <tr><td>willow</td><td>女</td><td>湖南长沙</td></tr>
            <tr><td>lemon</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td>奥利</td><td>女</td><td>浙江温州</td></tr>
       </tbody>
   </table>

CSS代码：

<style>
    .even{background: aquamarine;}
    .odd{background: #DBDBDB;}
    .selected{  color:red;  }
</style>

$(function(){
        $("tbody>tr:even").addClass("even");//给tbody中的奇数行添加样式
        $("tbody>tr:odd").addClass("odd");//给tbody中的偶数行添加样式
        $("tr:contains('lisa')").addClass("selected"); //将某一行高亮显示状态
})

显示效果：