html - 在html中使一行可点击

Question

我试图通过调用 Controller (我使用的是 symfony)使表格的行可点击，我发现 this solution ，但我遇到的问题是，即使行的标题是可点击的，也会导致我出错，另一个问题是，当我自定义悬停时，即使我使用类或指定样式，它也会应用于所有行在<tr>里面

这是我的代码

<table class="table table-hover ">
  <thead>
    <tr>
      <th>N°</th>
      <th>Titre</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    {% for key, rech in recherche %}
    <tr style="cursor: pointer;">
      <td><a href="{{ path('resultat',{'id':rech.id}) }}">{{ loop.index }}</a>
      </td>
      <td>{{ rech.titre | raw }}</td>
      <td>{{ rech.date | date('Y-m-d') |raw }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

感谢您的回复。

Answer 1

您可以尝试下面的解决方案。

编辑
确保在标题部分添加此引用

编辑
将js代码放在一个文件中，并在body关闭之前将其放在页面底部。

<script src="/path/filename.js">

进入标题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

DEMO

<table class="table table-hover ">
                                <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Titre</th>
                                    <th>Date</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for key, rech in recherche %}
                                    <tr data-href="{{ path('resultat',{'id':rech.id}) }}">
                                        <td>{{ loop.index }}</td>
                                        <td>{{ rech.titre | raw }}</td>
                                        <td>{{ rech.date | date('Y-m-d') |raw }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

js

    $(function(){
      $(document).on('click', '[data-href]', function () {
        var url = $(this).data('href');
        if (url && url.length > 0) {
            document.location.href = url;
            return false;
        }
      });
    });

CSS

.table-hover tbody tr {
 background: #dcdcdc;
 pointer: cursor;
}