使用 jQuery + 指定的 selector 達成, 其實很容易, 原則上只是要把第 n列後的內容先隱藏, 於需要時再顯示的概念.
當然, 若是從後端也是很容易實現, 不過目前是打算從前端做的話, 方式如下:
$(“.table tr:nth-child(n+4)”).toggle();
就這樣? 對, 就是這樣, 指定第 4筆 tr 起(含, 與之後), 會被選出來進行 toggle, 這樣一來就可以容易地在前端進行 table 內, 指定行之後的內容隱藏與顯示.
可以參考範例:
https://codepen.io/timhuang/pen/PLWrap
另外可以參考有用的選擇器方式:
在 HTML 中, 寫表格做報表是再平常不過的事了.
不過若是要分行分色, 一般可以設一個 class出來, 用個淺色的底色來放在奇數行或是偶數行來呈現, 效果就會出來了.
現在要利用 CSS3 的 selector 來進行這個操作, 也就是 nth-child 的語法. 來看看怎麼用吧!
基本上這個 selector 寫在 tr 後, 如:
tr:nth-child(odd)
這樣自然就會是在奇數行應用對應的 css, 可以參考 http://sample.diary.tw/32/1.htm 的 List1.
List1 用的 css 如下:
tbody.sample1 tr:nth-child(odd){
background: #efefef;
}
當然若是需要選擇偶數行, 則可以使用 nth-child(even) 即可.
下面介紹選擇若是需要每 3行一次, 則可以利用以下語法:
tr:nth-child(3n)
自然就會是每 3行為選擇到的, 可以參考 http://sample.diary.tw/32/1.htm 的 List2.
List2 用的 css 如下:
tbody.sample1 tr:nth-child(3n){
background: #efefef;
}
所以這裡出個題目, odd 及 even 等同於什麼呢? 分別為 2n+1 及 2n, 有興趣的朋友們可以自行試看看.
另外再來看一個更複雜的, 3行, 但用兩色, css 就會多一點:
tbody.sample3 tr:nth-child(3n){
background: #efefef;
}
tbody.sample3 tr:nth-child(3n+1){
background: #ffefef;
}
效果請參考 http://sample.diary.tw/32/1.htm 的 List3.
這個”第n個小孩”選擇器用的法, 可以參考這裡: http://www.qianduan.net/useful-nth-child-recipies.html , 其實就是數學的代數式, n從 0 開始, 1次加 1, 所以以下為幾種可能:
n+5 代表著第 5, 6, 7, 8, 9….
-n+3 代表著第 3, 2, 1
2n 代表著 2, 4, 6, 8… (因為沒有第 0個, 也等同於 even)
2n+1 代表著 1, 3, 5, 7… (也等同於 odd)
3n 代表著 3, 6, 9 …
這樣就容易看懂了!