在html中点击一行

Question

我试图通过调用控制器（使用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代码放在一个文件中，并在正文关闭之前将其放在页面底部。

<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;
}

Answer 2

您好我们只需添加Jquery的链接

<script src="../jquery.min.js"></script>

<table>
        <thead style="display: none">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for project in projects %}


                <tr class="tablerowproject" data-href="{{ path('company_index') }}">

                    <td><i class="step fi-lightbulb" style="font-size: 60px; color: #FBFCF7 "></i></td>
                    <td>{{ project.name }}</td>
                    <td>
                        <ul>
                            <li>
                                <a href="{{ path('project_show', { 'id': project.id }) }}">show</a>
                            </li>
                            <li>
                                <a href="{{ path('project_edit', { 'id': project.id }) }}">edit</a>
                            </li>
                        </ul>
                    </td>

                </tr>


        {% endfor %}
        </tbody>
    </table>

并添加此行

<script type="text/javascript">
    $(document).ready(function(){
        $(".tablerowproject").click(function() {
            window.document.location = $(this).data("href");
        });


    })
</script>

添加你的文件CSS添加这个

.tablerowproject {
    display: block;
    background-color: #345d71;
    border-radius: 5px;
    cursor: pointer;

}
.tablerowproject:hover{
    background-color: #092636;
}

这是我的结果