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)等等,就要去對這些元素去做變更,是沒有辦法的。例如,在一間教室裡面,你還沒把A同學和B同學叫進教室,就想要叫A同學去擦黑板、B同學去倒垃圾這是沒辦法的,因為你根本不知道教室裡面又那些人,而 $(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 : oddtr : 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>
以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言