jquery实现表格中点击相应行变色功能效果【实例代码】 - Web前端

作者：98wpeu发布时间：2026-08-21分类：网页前端技术浏览：3

导读：对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于：<!DOCtypehtml><HTML...

对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于：

<!DOCtype html>

<HTML lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="CSS/style.css" rel="StyleSheet" type="text/css" />
 <script src="JQuery-1.3.2.min.JS"></script>
 <script>
  $(function () {
   $('tbody>tr').click(function () {
    $(this).addClass('selected')  //为选中项添加高亮
    .siblings().removeclass('selected')//去除其他项的高亮形式
    .end();
   });
  }); 
 </script>
</head>
<body>
 <table>
  <thead>
   <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  </thead>
  <tbody>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
  </tbody>
 </table>
</body>
</html>

以上这篇jQuery实现表格中点击相应行变色功能效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

标签：表格实例效果代码功能 Web

上一篇：jQuery代码实现表格中点击相应行变色功能 - Web前端
下一篇：jQuery的promise与deferred对象在异步回调中的作用 - Web前端

jquery实现表格中点击相应行变色功能效果【实例代码】 - Web前端

相关推荐