jQuery对表格的操作

最新推荐文章于 2025-10-15 22:39:35 发布

原创

最新推荐文章于 2025-10-15 22:39:35 发布 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #表格

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

表格变色

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"); //将某一行高亮显示状态
})

显示效果：

最低0.47元/天解锁文章