我試圖採用語義UI,並遇到一些麻煩。我想讓行選擇在表格中工作。無法使用語義UI表獲得表格行選擇
我使用下面的示例HTML:
<table class="ui selectable celled table">
https://jsfiddle.net/yjuoqdcy/
你可以看到,鼠標懸停在排什麼都不做。我猜我缺少某種行爲或事件,但我在文檔中找不到太多內容。
感謝您的幫助。
我試圖採用語義UI,並遇到一些麻煩。我想讓行選擇在表格中工作。無法使用語義UI表獲得表格行選擇
我使用下面的示例HTML:
<table class="ui selectable celled table">
https://jsfiddle.net/yjuoqdcy/
你可以看到,鼠標懸停在排什麼都不做。我猜我缺少某種行爲或事件,但我在文檔中找不到太多內容。
感謝您的幫助。
看來,您使用的語義UI框架的舊版本(1.11.8)。升級到最新版本將允許您使用行選擇而不需要定製CSS。
selectable table
在2.0.0版本中引入。 - Release notes
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<table class="ui selectable celled table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No Action</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
</tr>
</tbody>
</table>
謝謝!這也可能會回答我的很多其他問題。 – DungeonTiger
我希望它。如果你來自Bootstrap等其他框架,這個框架有一個大致的過渡期,但它是值得的! –
你的意思是你想讓單元格的背景在鼠標懸停時改變顏色?
如果是這樣,所有你需要的是這樣的。
table tr:hover {
background: #CCCCFF;
}
您可以添加自定義樣式使用tr:hover
行。做必要的造型與
tr:hover {
background-color: #f5f5f5;
}
添加'TR:懸停{ 背景顏色:#f5f5f5; }'到你的CSS。更新[** fiddle **](https://jsfiddle.net/Pugazh/yjuoqdcy/3/) – Pugazh