2016-05-12 50 views
1

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

我使用下面的示例HTML:

 <table class="ui selectable celled table"> 

https://jsfiddle.net/yjuoqdcy/

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

感謝您的幫助。

+0

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

回答

1

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

+0

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

+0

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

0

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

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

table tr:hover { 
    background: #CCCCFF; 
} 

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