無法使用語義UI表獲得表格行選擇

我試圖採用語義UI，並遇到一些麻煩。我想讓行選擇在表格中工作。無法使用語義UI表獲得表格行選擇

我使用下面的示例HTML：

 <table class="ui selectable celled table">

https://jsfiddle.net/yjuoqdcy/

你可以看到，鼠標懸停在排什麼都不做。我猜我缺少某種行爲或事件，但我在文檔中找不到太多內容。

感謝您的幫助。

來源

2016-05-12 DungeonTiger

添加'TR：懸停{ 背景顏色：＃f5f5f5; }'到你的CSS。更新[** fiddle **]（https://jsfiddle.net/Pugazh/yjuoqdcy/3/） – Pugazh

看來，您使用的語義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>

來源

2016-05-12 15:32:49

謝謝！這也可能會回答我的很多其他問題。 – DungeonTiger

我希望它。如果你來自Bootstrap等其他框架，這個框架有一個大致的過渡期，但它是值得的！ –

你的意思是你想讓單元格的背景在鼠標懸停時改變顏色？

如果是這樣，所有你需要的是這樣的。

table tr:hover { 
    background: #CCCCFF; 
}

https://jsfiddle.net/link2twenty/cae2k9fy/

來源

2016-05-12 14:58:07

您可以添加自定義樣式使用tr:hover行。做必要的造型與

tr:hover { 
    background-color: #f5f5f5; 
}

https://jsfiddle.net/Pugazh/yjuoqdcy/3/

來源

2016-05-12 15:02:28 Pugazh

無法使用語義UI表獲得表格行選擇

回答

相關問題