假設我有一個表，看起來像這樣：如何在表中選擇包括colspans的列？

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td colspan="2"></td> 
    <td></td> 
    <td colspan="2"></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td colspan="2"></td> 
    <td></td> 
    <td colspan="2"></td> 
    </tr> 
</table>

如何選擇在第四列中的所有細胞，包括跨越它與CSS的TD [合併單元格=「2」]？

來源

2014-10-16 Frinsh

你是什麼意思「選擇所有單元格」？你是否試圖將這些單元格設計爲相同的？ – Brian 2014-10-16 15:51:44

@BrianBennett是的，對不起，我編輯了這個問題:) – Frinsh 2014-10-16 15:52:42

不知道你可以用CSS做這個，因爲你會試圖選擇多個屬性（http://jsfiddle.net/qwvxzjkv/2/） – 2014-10-16 15:57:59

它不漂亮，但可以與多個選擇來完成：http://jsfiddle.net/r4atjtfx/1/

tr:first-child td:nth-child(4), 
tr:first-child + tr td[colspan="2"] ~ td[colspan="2"], 
tr:last-child td:nth-child(3) { 
    color: orange; 
}

但是，爲了回答你的問題不存在選擇的目標不同的表列。

來源

2014-10-16 16:02:13 Adrift

這真的很聰明。 +1。 – Brian 2014-10-16 16:04:12

不錯的方法，但我認爲對於每種情況都太具體......不是一般的解決方案。 – DaniP 2014-10-16 16:12:14

@Danko：確切地說，這就是我編輯的原因，因爲我現在意識到OP正在尋找一個特定的選擇器來定位不同的表列（不存在）。 – Adrift 2014-10-16 16:13:14

CSS：

演示上Fiddle

tr :nth-child(4), tr td[colspan="2"] { 
    color: red; 
} 
td { 
    border: 1px solid black; 
}

的jQuery：

演示上Fiddle

for (i = 1; i < document.getElementsByTagName('tr').length * 2; i++) { 
    console.log($('table :nth-child(' + i +') :nth-child(4)').html()); 
    console.log($('table :nth-child(' + i + ') td[colspan="2"]').html()); 
}

來源

2014-10-16 16:11:13

您可以使用第n個孩子的組合來指定的元素與不和attr。

DEMO

tr>td:not([colspan])+td:nth-child(4):not([colspan]) { 
    background-color: yellowgreen; 
} 
tr>td[colspan]:nth-child(3) { 
    background-color: yellowgreen; 
} 
tr>td[colspan]:nth-child(2)+td { 
    background-color: yellowgreen; 
}

來源

2014-10-16 16:11:56 jme11

如何在表中選擇包括colspans的列？

回答

CSS：

演示上Fiddle

的jQuery：

演示上Fiddle

DEMO

相關問題