我试图通过调用控制器(使用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>
感谢您的回复。
答案 0 :(得分:2)
您可以在下面尝试此解决方案。
修改
请务必在标题部分
的修改
将js代码放在一个文件中,并在正文关闭之前将其放在页面底部。
<script src="/path/filename.js">
进入标题
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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;
}
答案 1 :(得分:0)
您好我们只需添加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;
}