[精讚] [會員登入]
3091

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

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

分享此文連結 //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

 

 

END

你可能感興趣的文章

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

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

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

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

隨機好文

HP SAS硬碟leds燈號說明 HP SAS硬碟leds燈號(hp g7/g6系統適用)說明

好用的3+2碼郵遞區號查詢系統推薦 網路上找到用地址輸入判斷3+2碼郵遞區號的辨識率不高,除了這個網站…

此一時彼一時 我是不是易怒的人,其實我也不知道,總之我常會失控,不知道自己在幹嘛。這近生活過得浮浮的,不是很踏實,總會想太多,我甚至會

[AS3] 變數型態 基本類型宣告 as3 有下列幾種基本類型:string, int, number, object, boolean, n

原來KNOW-HOW這麼不值啊~~ 我把網路線拔了又插回去,把交換器重開,斷線的問題就解決了,所花的時間30秒..