make a row clickable in 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><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 for your response.

this has nothing to do with the symfony2 tag – pcm May 12 '15 at 09:34 — pcm, May 12 '15 at 09:34

Dejan.S · Accepted Answer · 2015-05-15T09:37:45.203

2

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

edited May 15 '15 at 09:37

answered May 12 '15 at 09:46

Dejan.S

18,571
22
69
112

what kind of issue? @ADA15 – Dejan.S May 12 '15 at 13:07
the same of the first time – ADA15 May 12 '15 at 14:22
@ADA15 then something might be wrong with your url generating script? Try to add a hardcoded url instead to the `data-href` to see if it works. if you do like my solution above then only the content rows are getting the `data-href`, as that is only the thing in the foreach. The title rows `N°, Titre, Date` will not be clickable, they don't even have the `data-href`. It seems as your issue is also with css? check my modified answer. – Dejan.S May 13 '15 at 05:17
I did exactly what you propose, but the row is not clickable and i can't really know what is the cause – ADA15 May 13 '15 at 10:18
@ADA15 you are most likley not referencing the jquery file, check my updated reply. – Dejan.S May 15 '15 at 06:10
@ADA15 You can put the js function before closing the body, `
` I updated the answer with `
– Dejan.S May 15 '15 at 09:17

score 0 · Answer 2 · answered May 08 '16 at 11:57

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

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

make a row clickable in html

2 Answers2