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)容，希望對大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

jquery autocomplete自動完成插件的的使用方法
最近剛開始學(xué)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)頁面加載效果
本文主要介紹了jquery實現(xiàn)頁面加載效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
JqGrid web打印實現(xiàn)代碼
最近，項目使用了JqGrid，但需要打印Grid里面的數(shù)據(jù)。使用的是CSS屬性中的Media媒體類型來控制打印樣式。
2011-05-05
jquery實現(xiàn)文字單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）
本文詳細(xì)介紹了jquery實現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jquery+ajax驗證不通過也提交表單問題處理
這篇文章主要介紹了jquery validationEngine中使用ajax驗證不通過也提交表單問題處理,需要的朋友可以參考下
2014-12-12
Jquery調(diào)用webService遠(yuǎn)程訪問出錯的解決方法
原來web.config里面默認(rèn)Post設(shè)置是不允許遠(yuǎn)程調(diào)用webservice，需要配置一下就可以了
2010-05-05
jquery實現(xiàn)上下左右滑動的方法
這篇文章主要介紹了jquery實現(xiàn)上下左右滑動的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下
2015-02-02
jquery實現(xiàn)浮動的側(cè)欄實例
這篇文章主要介紹了jquery實現(xiàn)浮動的側(cè)欄,實例分析了基于jQuery的stickySidebar插件實現(xiàn)浮動層的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
40個新鮮出爐的jQuery 插件和免費教程[上]
作為最流行的 JavaScript 庫，jQuery 擁有豐富的插件，能夠幫助開發(fā)者簡單快速的實現(xiàn)各種功能
2012-07-07