有需要可先看看上一次教學 : jQuery教學(1) - GridView/Table中使用Selectors
大家可以先試試效果 :
1. Click一下Row，會把整列Highlight起來。
2. 選取Row後，按Delete按鈕會把Row FadeOut。
3. Double click 藍色的格子會動畫式把文字放大。
4. Double click 粉紅色的格子會把文字摺疊起來。
我想只有toggleClass才需要用一點點文字表達，其他的，相信只放上代碼大家都能看得懂。
toggleClass
1.用Selector+filter把整個Table的cell return，filter的意義並不是把符合的去掉，而是相反地return給jQuery API。
2.再remove所有row的的Class:currRow，確保所有Row都沒有Highlight。
3.最後才把click() event中的row加上currRow class達至選取效果。
<script type="text/javascript">
//HighLight Row after mouse click
$('#gridtable tr').filter(function () {
return $('td', this).length && !$('table', this).length
}).click(function () {
$('#gridtable tr').removeClass("currRow");
$(this).toggleClass('currRow');
});
</script>
fade
<script type="text/javascript">
//delete row
$("#del").click(function () {
var hideRows = $("#gridtable tr").hasClass("currRow");
if (hideRows == true) {
$("#gridtable tr.currRow td").fadeOut(1000);
}
});
</script>
animate & slide
<script type="text/javascript">
//animate & slide
//Only td with div inside will be select.
//title="ani" is the flag for animate.
$('#gridtable tr td div').dblclick(function () {
if ($(this).attr('title') == 'ani') {
$(this).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0in",
fontSize: "50px",
borderWidth: "10px"
}, 1500);
} else {
$(this).slideToggle("slow");
}
});
</script>
大家可見其實，透過jQuery去做這些效果並不複雜。其實WordPress中的Admin頁上，或者很多Web 2.0網站上，大家都看到很多類似的效果。
完整的網頁HTML碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>亞特蘭提斯 Net Atlantis - jQuery教學(2) - GridView/Table的slide/fade/animate效果</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//HighLight Row after mouse click
$('#gridtable tr').filter(function () {
return $('td', this).length && !$('table', this).length
}).click(function () {
$('#gridtable tr').removeClass("currRow");
$(this).toggleClass('currRow');
});
//delete row
$("#del").click(function () {
var hideRows = $("#gridtable tr").hasClass("currRow");
if (hideRows == true) {
$("#gridtable tr.currRow td").fadeOut(1000);
}
});
//animate & slide
//Only td with div inside will be select.
//title="ani" is the flag for animate.
$('#gridtable tr td div').dblclick(function () {
if ($(this).attr('title') == 'ani') {
$(this).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0in",
fontSize: "50px",
borderWidth: "10px"
}, 1500);
} else {
$(this).slideToggle("slow");
}
});
});
</script>
<style type="text/css">
body
{
font: small arial;
}
tr:first-child
{
background-color: #F5F5DC;
}
tr:first-child:hover
{
background-color: #F5F5DC;
}
tr:hover
{
background-color: #E8FFEC;
cursor: pointer;
}
td
{
border: #ccc 1px solid;
text-align: center;
width: 100px;
}
td:hover
{
background-color: #E8FFEC;
border: #666 1px solid;
width: 100px;
cursor: pointer;
}
.currRow
{
background-color: #F0BD00;
cursor: pointer;
}
</style>
</head>
<body>
<table id="gridtable">
<tr>
<th>Product id</th><th>Console Name</th><th>Colour</th>
</tr>
<tr>
<td><div title="ani" style="background-color:#ADD8E6">1</div></td><td>Play Station 3</td><td>Black</td>
</tr>
<tr>
<td>4 </td><td>Xbox 360</td><td><div title="ani" style="background-color:#ADD8E6">White</div></td>
</tr>
<tr>
<td>11 </td><td><div title="slide" style="background-color:#FFB6C1">NDSL</div></td><td>Red</td>
</tr>
<tr>
<td>18</td><td>PSP</td><td><div title="slide" style="background-color:#FFB6C1">Silver</div></td>
</tr>
<tr>
<td>26</td><td><div title="ani" style="background-color:#ADD8E6">Wii</div></td><td>White</td>
</tr>
</table>
<button id="del" type="button">Delete Selected Row</button>
<button id="reload" type="button" onclick="window.location.reload()">Reload Table</button>
</body>
</html>
張大大：
回覆刪除小弟剛學Jquery而已，所以看的有些吃力。
本篇的這一行，看不懂，可以再說明一下嗎？
$('#gridtable tr').filter(function() {
return $('td', this).length && !$('table', this).length
}).click(function() {
$('#gridtable tr').removeClass("currRow");
$(this).toggleClass('currRow');
});
Q1:filter 是將tr元素中的某一些class取出對嗎？
Q2:return 的用法是指$('td', this).length && !$('table', this).length的回傳值嗎？
Q3: 一般$(selectors);中的selectors不都是單一值嗎？ $('td', this) 這個是什麼意思呢？
Q4: 那$('td', this).length && !$('table', this).length 這是表示 td,this的個數 且不等於 table,this的個數嗎？ 看不懂，用猜的，sorry
Q5:接著click(function() {.....這段，可以看出前面retrun出來的應該是一個個的tr,所以Q4的推論好像不對了，愈來愈不明....
請多指導了，感謝您！
Re:Mitchell Hu
回覆刪除Q1.代碼中, Filter的意思是取出td的collection.
Q2.這是jQuery中的inline function, return用純粹用作回存filter後的td
Q3. javascript中的Selector不是單一值,例如Javascript中GetElementsByName或GetElementByTagName就已經是collection,而jQuery中的selector亦是同一道理.
$(’td’, this),this 意思是Table中的tr, 所以整句可以理解為"Table中的tr的td".
Q4,Q5.意思是這樣,但這是用作合乎條件以回存td
其實我這個例子對初學者而言或者是比較難明,我個人推薦可以參考官網的例子,再回來看看我的,就會明白.
http://docs.jquery.com/Traversing/filter
謝謝網主的分享,請問一下如果想click的時候變成選取1整 colomn 而不是 row 的話,可以怎樣做呢?
回覆刪除