Home/ Questions/Q 9059725
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:02:49+00:00

Im having some trouble with this clickable row using javascript: http://www.fpmnky.com/test.php The curser doesnt

  • 0

Im having some trouble with this clickable row using javascript:

http://www.fpmnky.com/test.php

The curser doesnt change to a pointer and if you click the text area of the row it does not go to the link in the code [google.com]

    <script type="text/javascript" src="other_lib.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        jQuery( function($) {
            $('tbody tr[data-href]').addClass('clickable').click( function() {
                window.location = $(this).attr('data-href');
            }).find('a').hover( function() {
                        $(this).parents('tr').unbind('click');
                    }, function() {
                        $(this).parents('tr').click( function() {
                            window.location = $(this).attr('data-href');
                        });
                    });
            $('tbody tr[data-href]').css( 'cursor', 'pointer' );

            $('tbody tr[data-href]').hover(function() {
                $(this).css('cursor','pointer');
            });
        });

    </script>

<body>

<table>
    <thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr class="even" data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    <tr class="even" data-href="http://google.com">
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td><a href="#">Edit</a> <a href="#">Delete</a></td>
    </tr>
    </tbody>
</table>

</body>
</html>

It appears to work on jsfiddle just fine though:

http://jsfiddle.net/UN7Pc/5/

What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http:Your problem is here

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

    The location is wrong, if you fix that, your code will work

    By the way you can link to jquery through google if you want

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    • 0