2015年3月8日

[教學] jQuery學習筆記 第二堂（表格建立、表格中套色，奇偶列不同色）

      , , , , ,  


第二堂課中，主要的學習表格的建立，將每一表格套用同樣底色或是根據奇偶數列有不同的底色，這堂課中，我們會學習利用HTML、CSS和jQuery的不同方式來達到這樣的效果。

結果就像這樣：結果一、結果二。



這一堂課會學到的語法包含：

[HTML]
<tabel><tr><td>：表格建立
nth-child( )：選擇某一資料，例如odd或even

 [jQuery]
$( ).css( )：套用css樣式
addClass( )

表格建立


表的寫法，要先寫出「表的格式（table style）」，接著表格的標題（th; table head）寫出列（tr；table row），接著在寫出欄內資料（td；table data），其他更仔細的說明，一樣在W3School，這裡就不說明了。

將同一表格套用同樣底色

方法一：使用HTML & CSS
我們先學習不用jQuery的方法。
首先，我們先隨便建立一個表格


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>改變所有列的底色-CSS</title>
</head>
<body>
<table  border="1" width="200px" >
<tr>
    <th> 座號 </th>
    <th> 身高 </th>
</tr>
<tr>
    <td> 01</td>
    <td>130</td>
</tr>
<tr>
    <td>02</td>
    <td>140</td>
</tr>
<tr>
    <td> 03</td>
    <td>145</td>
</tr>
<tr>
    <td> 04</td>
    <td>150</td>
</tr>
<tr>
    <td> 05</td>
    <td>155</td>
</tr>
<tr>
    <td> 06</td>
    <td>160</td>
</tr>
</table>

</body>
</html>

我們在最上面加上一些CSS的語法，把表格變成紫色實線

首先，我們一樣要在head的地方加入style，table（表格）、th（表格標題）、td（表格內容）；border表示表格的寬度，solid表示要顯示出實線，purple是顏色；border-collapse表示要讓表格是細的實線；text-align表示表格中文字的對齊方式。


若要將所有的表格套用相同的顏色（例如，灰色），只需在style裡面加上background color就可以了：


我們也可以讓標題的底色是紫色，文字是白色，只需要在下面加上專門為標題而定的格式就可以了。


方法二：使用jQuery

使用jQuery前，有一些前置動作，首先要到jQuery的官方網站，下載jQuery。


把檔案儲存到與網頁相同的資料夾，等一下我們在從程式碼的地方去匯入所下載的檔案就可以使用了。

jQuery的基本語法是「$().()」，第一個括號內放的是「對象」，句點後面放的是「動作」，第二個括號內「設定」，也就是「$(對象).動作(設定)」。其實，$().()符號很好記，套句老師說的，只要記成"我得眼裡只有錢"。


要先「引入jQuery」，使用到如下的語法


下面這段程式碼的意思，則是告訴它，當我的網頁（document）讀取完了之後（ready），執行以下的功能（function），然後function函式的寫法則是function(){}。


之所以要有 $(document).ready(...) 這段，是因為如果我們在網頁相關的元素（例如，裡面有哪些class, id）等等，就要去對這些元素去做變更，是沒有辦法的。例如，在一間教室裡面，你還沒把Ａ同學和Ｂ同學叫進教室，就想要叫Ａ同學去擦黑板、Ｂ同學去倒垃圾這是沒辦法的，因為你根本不知道教室裡面又那些人，而 $(document).ready(...) 這段就很像是說，先等該到的同學們都進教室後，在開始動作。


接著，我們裡面就可以告訴它，哪個同學要做哪件事了，例如這裡我希望所有的"tr"都多背景色為#DDDDDD的css屬性，我們就只需要輸入 $("tr").css("background-color",#DDDDDD) ，還記得我們上面說jQuery的用法嗎？

首先，我的眼裡只有錢 $( ).( ) ，然後裡面分別釋放「$(對象).動作(設定)」，這裡的對象就是 tr ，動作就是css，設定就是background-color。

透過這樣的語法，也可以把表格全部套成相同的底色（說明：W3School網站）


如果我們想要在jQuery中一次套用多種css樣式，也是可以的，作法如下：
我們一定可以指定我們要的對象（如"table"和"th），接著要在css中再加上大括弧，中間再加上我們欲改變的屬性，每一屬性之間用逗號相隔，就可以了：


結果就會和，前一個用css範例做出來的一模一樣了。

使單數列和偶數列不同色

在瀏覽網站表格的時候，為了方便讀者閱讀，我們常常會看到表格中的單數列和偶數列是不同色的，那麼，我們要如何做到這個步驟呢？一樣可以透過css的語法或jQuery達到這個效果。

方法一：使用HTML & CSS

這個方法需要用到我們前一堂沒有講到的，也就是要建立「id」，建立id的方式，就是在變數前加上「#」字號；同時，還要使用到「nth-child()」這個函示。

在這裡，我先把我的table id 命名為dd，接著我就可以針對dd這個id名稱去做css的編輯。

而nth-child()，可以告訴它說，我們要針對奇數列（odd）或偶數列（even）進行css的編輯。 nth-child( ) 這個函數除了可以指定奇偶列外還有其他更多的用法，更多說明可以參考CSS可樂。


結果呈現就會像這樣了：



方法二：使用jQuery

寫法跟前面所講用jQuery套色的方法一樣，只是這裡要指定奇數列和偶數列而已，寫法如下主要是指定對象為 tr : odd 和 tr : even

完成後，結果就會和HTML & CSS的寫法一樣嘍。

方法三：合併使用HTML、CSS、jQuery

第三個方法可以算是最為複雜，同時包含了HTML、CSS和jQuery的寫法。
首先，我們一樣建立表格，並且建立一個id為type的格式：


先利用CSS，建立名稱為「odd」和「even」的class：


再利用jQuery中， addClass 這個函數，對type這個表格的奇數欄，增加odd的css樣式；對偶數欄增加even的css樣式。


透過這個方法，一樣可以得到奇偶列不同色的效果。

大家可以看看這堂課的成果喔：結果一、結果二。

程式碼範例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>改變所有列的底色-CSS</title>
    <style>
        /*
    table, th, td{
        border:1px solid purple;
        border-collapse:collapse;
        text-align:center;
        background-color:#DDDDDD
        }
    th{
        background-color:purple;
        color:white;
    }*/
    </style>
</head>
<body>
<table  border="1" width="200px" >
<tr>
    <th> 座號 </th>
    <th> 身高 </th>
</tr>
<tr>
    <td> 01</td>
    <td>130</td>
</tr>
<tr>
    <td>02</td>
    <td>140</td>
</tr>
<tr>
    <td> 03</td>
    <td>145</td>
</tr>
<tr>
    <td> 04</td>
    <td>150</td>
</tr>
<tr>
    <td> 05</td>
    <td>155</td>
</tr>
<tr>
    <td> 06</td>
    <td>160</td>
</tr>
</table>

</body>
</html>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>奇偶列不同色</title>
    <script src="jquery-1.11.2.min.js"></script>
    <style>
        #type {width:200px; border-collapse: collapse }
        #type td {text-align: center; border:purple solid 1px}
        #type th {background-color: purple; color:white;border: purple solid 1px}
        .odd{background-color: #CCBBFF;}
        .even{background-color: #DDDDDD;}
    </style>
    <script src="jquery-1.11.2.min.js"></script>
     <script>
    $(document).ready(function(){
    $("#type tr:odd").addClass("odd");
    $("#type tr:even").addClass("even");
    })
    </script>
</head>
<body>
<table id="type">
<tr>
    <th> 座號 </th>
    <th> 身高 </th>
</tr>
<tr>
    <td> 01</td>
    <td>130</td>
</tr>
<tr>
    <td>02</td>
    <td>140</td>
</tr>
<tr>
    <td> 03</td>
    <td>145</td>
</tr>
<tr>
    <td> 04</td>
    <td>150</td>
</tr>
<tr>
    <td> 05</td>
    <td>155</td>
</tr>
<tr>
    <td> 06</td>
    <td>160</td>
</tr>
</table>

</body>
</html>
以上內容均為本人在馬老師雲端研究室學習所整理之筆記

0 意見:

張貼留言