Question

我试图采用Semantic-UI，但我遇到了一些麻烦。我想让行选择在表格中工作。

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

        <table class="ui selectable celled table">

https://jsfiddle.net/yjuoqdcy/

你可以看到悬停在行上什么都不做。我猜测我错过了某种行为或事件挂钩，但我在文档中找不到多少。

感谢您的帮助。

Answer 1

您似乎正在使用Semantic UI框架的旧版本（1.11.8）。升级到最新版本将允许您使用行选择而无需自定义CSS。

版本2.0.0中引入了

selectable table。 - 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/

无法使用semantic-ui表获取表行选择

3 个答案: