jQuery代碼實現(xiàn)表格中點擊相應行變色功能
更新時間:2016年05月09日 14:02:03 作者:張楊
對于一個表格,為了更好的用戶體驗度,需要把選中的表格項添加高亮,下面小編給大家介紹使用jquery實現(xiàn)表格中點擊相應行變色功能的實例代碼,需要的朋友參考下
對于一個表格,為了使我們選中的項更容易區(qū)分,需要為選中項添加高亮,同時也需要,將其他項的高亮形式去除。類似于:
<!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代碼實現(xiàn)表格中點擊相應行變色功能的全部內容,希望對大家有所幫助!
您可能感興趣的文章:
- jQuery動態(tài)生成不規(guī)則表格(前后端)
- jQuery動態(tài)生成表格及右鍵菜單功能示例
- JQuery 動態(tài)生成Table表格實例代碼
- jQuery動態(tài)生成Bootstrap表格
- JQuery Ajax動態(tài)生成Table表格
- Jquery 動態(tài)生成表格示例代碼
- jQuery實現(xiàn)多按鈕單擊變色
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jquery實現(xiàn)表格中點擊相應行變色功能效果【實例代碼】
- jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
- jQuery實現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法
相關文章
jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效多款代碼分享
這篇文章主要介紹了jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效,整體特效非常逼真自然,推薦給大家,有需要的小伙伴可以參考下2015-08-08EasyUI的doCellTip實現(xiàn)鼠標放到單元格上提示單元格內容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標放到單元格上有個提示的功能,對于Javascript教程感興趣的同學可以參考一下2016-08-08基于jQuery和hwSlider實現(xiàn)內容左右滑動切換效果附源碼下載(一)
本文結合實例給大家介紹如何實現(xiàn)內容滑動切換的效果,包括左右箭頭切換,無限無縫滾動,圓點按鈕切換,動畫效果,自動切換效果,效果非常不錯,感興趣的朋友前來參考實現(xiàn)代碼2016-06-06