make a row clickable in html - html

Question

I am trying to make a table's rows clickable, by calling a controller (am using symfony) and i found this solution, but the problem i have is that even the titles of the row is clickable and leads me to an error, and the other problem is that when i customize the hover it's applied on all the rows even if i use a class or specified the style inside the <tr>
Here is my code
<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>{{ loop.index }}
</td>
<td>{{ rech.titre | raw }}</td>
<td>{{ rech.date | date('Y-m-d') |raw }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Thanks for your response.

Answer 1

You can try this solution below.
EDIT
Make sure you add this reference in your header section
EDIT
put the js code in a file, and put this at the bottom of the page before the body close.
<script src="/path/filename.js">
Goes in the header
<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

hello we just add the link for 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>
show
</li>
<li>
edit
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
and add this lines
<script type="text/javascript">
$(document).ready(function(){
$(".tablerowproject").click(function() {
window.document.location = $(this).data("href");
});
})
</script>
add in your file CSS add this
.tablerowproject {
display: block;
background-color: #345d71;
border-radius: 5px;
cursor: pointer;
}
.tablerowproject:hover{
background-color: #092636;
}
and this my result