欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 全選/反選以及單擊行改變背景色實例

 更新時間:2013年07月02日 17:08:05   作者:  
通過jQuery實現全選或反選以及單擊行改變背景色,具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
我先把CSS樣式放出來,其實這個可以直接忽略
復制代碼 代碼如下:

body{margin:0;padding:0;font-size:12px;font-family:微軟雅黑;}
.datagrid{width:100%;}
.datagird tr th{background-color:#191970; font-size:14px;}
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* 選中行樣式 */
.table-row-selected{background:#fff68f;}

我們再來看頁面HTML結構
復制代碼 代碼如下:

<div id="page">
<table class="datagrid" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input id="CheckAll" name="checkall" type="checkbox" /></th>
<th>ID</th>
<th>標題</th>
<th>發(fā)布人</th>
<th>發(fā)布時間</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">1</td>
<td>阿里做對了哪三件事?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">2</td>
<td>大盤點:被互聯網改寫的16個傳統(tǒng)行業(yè)</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">3</td>
<td>如果智能手機市場有變,酷派們怎么辦?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">4</td>
<td>看看福特們是如何抵御谷歌蘋果的?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
</tbody>
</table>
</div>

實現功能
1)單擊行改變背景色
復制代碼 代碼如下:

$(".datagrid tbody tr").bind("click", function () {
var oThis = $(this);
if (oThis.hasClass("table-row-selected")) {
oThis.removeClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").removeAttr("checked");
} else {
oThis.addClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").attr("checked", "checked");
}
});

2)全選/反全選功能(未完成,待續(xù))

相關文章

  • 深入理解jquery中的each用法

    深入理解jquery中的each用法

    本文主要對jquery中的each用法進行介紹,相信會對大家學習each方法會很有幫助,下面就跟小編一起來看下吧
    2016-12-12
  • jQuery操作Dom元素與遍歷以及JS遍歷詳細講解

    jQuery操作Dom元素與遍歷以及JS遍歷詳細講解

    這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧
    2023-01-01
  • Raphael一個用于在網頁中繪制矢量圖形的Javascript庫

    Raphael一個用于在網頁中繪制矢量圖形的Javascript庫

    Raphael是一個用于在網頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標準和 VML 作為創(chuàng)建圖形的基礎,你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細介紹,感興趣的朋友可以了解下哦
    2013-01-01
  • jQuery沖突問題解決方法

    jQuery沖突問題解決方法

    在本篇文章里小編給大家整理的是一篇關于jQuery沖突問題解決方法,有興趣的朋友們可以學習下。
    2021-01-01
  • Easyui使用Dialog行內按鈕布局的實例

    Easyui使用Dialog行內按鈕布局的實例

    下面小編就為大家?guī)硪黄狤asyui使用Dialog行內按鈕布局的實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 騰訊與新浪的通過IP地址獲取當前地理位置(省份)的接口

    騰訊與新浪的通過IP地址獲取當前地理位置(省份)的接口

    通過IP地址獲取當前地理位置(省份)的接口,方便大家可以直接使用結合自己的系統(tǒng)。
    2010-07-07
  • HTML頁面彈出居中可拖拽的自定義窗口層

    HTML頁面彈出居中可拖拽的自定義窗口層

    這篇文章主要介紹了HTML頁面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下
    2014-05-05
  • jQuery實現簡單的抽獎游戲

    jQuery實現簡單的抽獎游戲

    這篇文章主要為大家詳細介紹了jQuery實現簡單的抽獎游戲,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • jQuery 淡入/淡出效果函數用法分析

    jQuery 淡入/淡出效果函數用法分析

    這篇文章主要介紹了jQuery 淡入/淡出效果函數用法,結合實例形式分析了jQuery 淡入/淡出功能fadeIn()、fadeOut()、fadeToggle()及fadeTo()函數基本功能、使用方法與操作注意事項,需要的朋友可以參考下
    2020-05-05
  • BootStrap和jQuery相結合實現可編輯表格

    BootStrap和jQuery相結合實現可編輯表格

    這篇文章主要介紹了BootStrap和jQuery相結合實現可編輯表格的相關資料,需要的朋友可以參考下
    2016-04-04

最新評論