jQuery代碼實現(xiàn)表格中點擊相應(yīng)行變色功能
更新時間：2016年05月09日 14:02:03 作者：張楊
對于一個表格，為了更好的用戶體驗度，需要把選中的表格項添加高亮，下面小編給大家介紹使用jquery實現(xiàn)表格中點擊相應(yīng)行變色功能的實例代碼，需要的朋友參考下
對于一個表格，為了使我們選中的項更容易區(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>
以上內(nèi)容是小編給大家介紹的jQuery代碼實現(xiàn)表格中點擊相應(yīng)行變色功能的全部內(nèi)容，希望對大家有所幫助！
您可能感興趣的文章:
- 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)表格中點擊相應(yīng)行變色功能效果【實例代碼】
- jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
- jQuery實現(xiàn)動態(tài)生成表格并為行綁定單擊變色動作的方法
相關(guān)文章
jquery autocomplete自動完成插件的的使用方法
最近剛開始學jquery，想實現(xiàn)類似GOOGLE搜索時自動顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08
jQuery用noConflict代替$的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query用noConflict代替$的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本文主要介紹了jquery實現(xiàn)頁面加載效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
最近，項目使用了JqGrid，但需要打印Grid里面的數(shù)據(jù)。使用的是CSS屬性中的Media媒體類型來控制打印樣式。2011-05-05
jquery實現(xiàn)文字單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）
本文詳細介紹了jquery實現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了jquery validationEngine中使用ajax驗證不通過也提交表單問題處理,需要的朋友可以參考下2014-12-12
Jquery調(diào)用webService遠程訪問出錯的解決方法
原來web.config里面默認Post設(shè)置是不允許遠程調(diào)用webservice，需要配置一下就可以了2010-05-05
這篇文章主要介紹了jquery實現(xiàn)上下左右滑動的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jquery實現(xiàn)浮動的側(cè)欄,實例分析了基于jQuery的stickySidebar插件實現(xiàn)浮動層的相關(guān)技巧,需要的朋友可以參考下2015-06-06![40個新鮮出爐的jQuery 插件和免費教程[上]](http://img.jbzj.com/images/xgimg/bcimg9.png)
作為最流行的 JavaScript 庫，jQuery 擁有豐富的插件，能夠幫助開發(fā)者簡單快速的實現(xiàn)各種功能2012-07-07