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)文章
關(guān)于HTML5的data-*自定義屬性的總結(jié)
大家總是習(xí)慣使用HTML標簽添加自定義屬性來存儲和操作數(shù)據(jù),所以才在HTML5規(guī)范里增加了一個自定義data屬性,這樣使用更便捷,一起跟隨小編過來看看吧2018-05-05
jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效多款代碼分享
這篇文章主要介紹了jQuery實現(xiàn)的數(shù)值范圍range2dslider選取插件特效,整體特效非常逼真自然,推薦給大家,有需要的小伙伴可以參考下2015-08-08
EasyUI的doCellTip實現(xiàn)鼠標放到單元格上提示單元格內(nèi)容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標放到單元格上有個提示的功能,對于Javascript教程感興趣的同學(xué)可以參考一下2016-08-08
基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載(一)
本文結(jié)合實例給大家介紹如何實現(xiàn)內(nèi)容滑動切換的效果,包括左右箭頭切換,無限無縫滾動,圓點按鈕切換,動畫效果,自動切換效果,效果非常不錯,感興趣的朋友前來參考實現(xiàn)代碼2016-06-06

