无法使用语义-ui table 获得 table 行选择

Question

我正在尝试采用 Semantic-UI，但遇到了一些麻烦。我想让行选择在 table.

中工作

我正在使用下面的示例 HTML：

        <table class="ui selectable celled table">

https://jsfiddle.net/yjuoqdcy/

您可以看到将鼠标悬停在行上没有任何作用。我猜我错过了某种行为或事件连接，但我在文档中找不到太多内容。

感谢您的帮助。

Answer 1

您的意思是当您将鼠标悬停在单元格上时，单元格的背景会改变颜色吗？

如果是这样，您只需要这样的东西。

table tr:hover {
  background: #CCCCFF;
}

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

Answer 2

您可以使用 tr:hover 向行添加自定义样式。使用

根据需要进行样式设置

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

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

Answer 3

看来您使用的是旧版本 (1.11.8) 的语义 UI 框架。升级到最新版本将允许您使用行选择而无需自定义 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>

无法使用语义-ui table 获得 table 行选择

Cannot get table row selection working with semantic-ui table

html

javascript

css

semantic-ui