jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】

更新時(shí)間：2016年05月09日 15:30:56 投稿：jingxian

下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

對于一個(gè)表格，為了使我們選中的項(xiàng)更容易區(qū)分，需要為選中項(xiàng)添加高亮，同時(shí)也需要，將其他項(xiàng)的高亮形式去除。類似于：

<!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')  //為選中項(xiàng)添加高亮
    .siblings().removeClass('selected')//去除其他項(xiàng)的高亮形式
    .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實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jqGrid增加時(shí)--判斷開始日期與結(jié)束日期(實(shí)例解析)
jqGrid增加時(shí)--判斷開始日期與結(jié)束日期(實(shí)例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
jQuery日期范圍選擇器附源碼下載
jQuery Date Range Picker是一款允許用戶選擇一個(gè)日期時(shí)間范圍的jQuery日期選擇器插件。下面通過本文給大家分享jQuery日期范圍選擇器的實(shí)現(xiàn)思路，需要的的朋友參考下吧
2017-05-05
基于JQuery的Select選擇框的華麗變身
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過CSS或其它技術(shù)進(jìn)行美化，讓它們看起來很漂亮了，唯獨(dú)下拉列表選項(xiàng)框(select box),不管你怎么做，它擺在那里總顯得格格不入。
2011-08-08
jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結(jié)合完整實(shí)例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area
2010-08-08
一個(gè)簡單的瀑布流效果(主體形式自寫)
瀑布流的主體即為幾個(gè)ul標(biāo)簽，新增加的元素以 li的形式按照當(dāng)前 ul的高度有選擇性的插入到某個(gè)ul下，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
jQuery ajax提交Form表單實(shí)例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實(shí)例分析了jQuery ajax操作實(shí)現(xiàn)表單提交的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過時(shí)間函數(shù)定時(shí)觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
easyui 中的datagrid跨頁勾選問題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求，easyui的datagrid分頁顯示數(shù)據(jù)，如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中，easyui會保存在其他頁選中的數(shù)據(jù)嗎？小編結(jié)合資料自己整理了一篇文章，需要的的朋友參考下吧
2017-01-01
8個(gè)超棒的學(xué)習(xí) jQuery 的網(wǎng)站推薦收藏
根據(jù)國外科技網(wǎng)站 W3Techs 一項(xiàng)調(diào)查了近100萬個(gè)網(wǎng)站數(shù)據(jù)顯示，jQuery是目前最流行的 JavaScript 庫。
2011-04-04