[精讚] [會員登入]
1198

表格如何選取一欄(選取一直行)

表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

此文完整連結 http://n.sfs.tw/13134

複製連結 表格如何選取一欄(選取一直行)@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-24 23:19:38 最後編修
2019-03-01 20:29:02 By 張○○
 

自動目錄

在CSS中常有需要選取一欄,過去的作法就是此欄給他一個class,再指定此class即可:

[過去的作法]

表格

  class="col2"  
  class="col2"  
  class="col2"  
  class="col2"  

 

CSS

.col2 { background-color:pink; }

JQUERY

$(".col2").css("background-color","pink");

這樣的作法缺點就是每個格子都得指定class。但對於舊的瀏覽器這是唯一解。

 

[使用 :nth-child]

使用CSS可以快速的選取該欄。

CSS

table tr td:nth-child(3) { background-color:yellow; }

JQUERY

$('table tr td:nth-child(3)').css("background-color", "yellow");

數字3是從右算到左的第3欄,包含隱藏的欄。

表格

     
     
     
     

 

[使用 colgroup/ col標籤]

HTML4 後出現了<colgroup>和<col>的標籤,但是到了 HTML5只剩下span屬性[2],所以…

好處是一次可指定多欄。

先替表格分群,例如1欄一組,2,3欄另一組。

<table>
  <colgroup>
    <col class="grp1">
    <col span="2" class="grp2">
  </colgroup>
  <thead></thead>
  <tbody>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
...
  </tbody>
</table>

再指定CSS即可

CSS

.grp2 { background-color:cyan; }

表格

     
     
     
     

備註

1. <colgroup>的標籤只要放在<table>中即可,並沒有一定要放在最上面。

2. <col>不一定要和全部欄位一致,例如你只要設定第3欄,但是表格有10欄,你的col只要有設置到第3個即可。

 

參考資料

[1] https://stackoverflow.com/questions/8375625/how-to-select-a-table-column-with-jquery

[2] https://www.w3schools.com/tags/tag_colgroup.asp

[3] https://www.w3schools.com/html/html_tables.asp

 

 

你可能感興趣的文章

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

安裝SPHINX支援中文 新版本的 sphinx 和舊版不同,網路上很多範例和教學是不能用的。此文是安裝和設定方法分享

維修海棉拖把頭 這類型的海棉拖把很好用,可是這近發現海棉頭越來越不耐用,也許是錯覺,以往都能用個三四個月,現在二個月就差不多掉下來。 這

[AS3] 物件加上超連結的方法 物件加上超連結,可讓使用者點擊的方法

兩次使用InnoDB的慘痛經驗 Mysql 的Innodb引擎雖然好用,但是我得說說我兩次的慘痛經驗,這讓我考慮以後可能不會再使用innodb了