css - make a row clickable in html -

i trying make table's rows clickable, calling controller (am using symfony) , found this solution, problem have titles of row clickable , leads me error, , other problem when customize hover it's applied on rows if use class or specified style inside <tr>

here code

<table class="table table-hover ">   <thead>     <tr>       <th>n°</th>       <th>titre</th>       <th>date</th>     </tr>   </thead>   <tbody>     {% 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> 

thanks response.

you can try solution below.

edit
make sure add reference in header section

edit
put js code in file, , put @ bottom of page before body close.

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

goes in 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>                                 {% 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; }