セマンティックUIテーブルを使用してテーブル行選択を取得できません

Question

私はセマンティックUIを採用しようとしていますが、何か問題があります。テーブルで作業する行選択を取得したいと思います。

私は以下の彼らのサンプルHTMLを使用しています：

 <table class="ui selectable celled table"> 

https://jsfiddle.net/yjuoqdcy/

あなたが行の上にマウスを移動すると、何もしないことがわかります。私はいくつかの種類の行動やイベントのフックアップがないと思っていますが、ドキュメントではそれほど多く見つけることはできません。

ご協力ありがとうございます。

Answer 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>

Answer 2

マウスの上にマウスを置いて背景の色を変えたいのですか？

もし必要なら、このようなものが必要です。

table tr:hover { 
    background: #CCCCFF; 
} 

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

Answer 3

あなたはtr:hoverを使用して行にカスタムスタイルを追加することができます。

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

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