表格如何選取一欄(選取一直行) @新精讚

[無邊框]

2029

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

“

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

„

分享此文連結 //n.sfs.tw/13134

分享連結表格如何選取一欄(選取一直行)@新精讚

(文章歡迎轉載，務必尊重版權註明連結來源)

2019-10-24 23:19:38 最後編修

2019-03-01 20:29:02 By 張○○

自動目錄

[過去的作法]
[使用 :nth-child]
[使用 colgroup/ col標籤]
參考資料

在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

你可能感興趣的文章

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

CSS 的 !important 意義網頁的前端工程師非常頭痛的事，就是同時要處理 IE和 FF等不同的瀏覽器，更糟的是 IE 又分成了 6 7 8三種版本，

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

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

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

[CSS] 多個 class 的表示法和寫法網頁設計中常會用到CSS，他的一般格式是這樣的：

我有話要說

訪客留言

[無留言]

隨機好文

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

[jQuery] select 元件的取值及給值 html中的元件select，在jquery中要如何使用？

[HP DL380G7] 生效啟動第3，4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3，4片網卡裝完系統後找不到，難道是壞了？要怎麼辦？

世紀帝國征服者新版本--被遺忘的帝國世紀帝國征服者新版本--被遺忘的帝國世紀二代的征服者是精典遊戲中的精典，aofe更好玩...

Smarty安裝 smarty 是著名的樣版引擎，非常的好用，用多了突然發現拿掉smarty反而不會寫php了，以下是安裝過程..

[過去的作法]
[使用 :nth-child]
[使用 colgroup/ col標籤]
參考資料

到最底端