CODEWITHSUNDEEP
javascriptjqueryhtml
CarCzar
CarCzar

Reputation: 150

Getting a table row to act as a link

I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.

I have tried looking at Making a table row (tr) clickable with jQuery (with an a href link, and hover!?) and how to get selected table row values using jquery? so far.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>X</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
        tr {
            margin:2px;
            padding:10px;
            display:block;
            background:#EEE;
            cursor:pointer;
        }
        tr:hover {
            background:#BBB;
        }
        </style>
    </head>
    <body>


    <script>

    $("tr").click(function() {
      window.location.href = $(this).attr("href");
    });

    </script>

<table class="tbl">
    <tr class=clickableRow href="http://www.zombo.com">
        <td>2014</td>
        <td>ACADIA</td>
        <td>SLE-2</td>
    </tr><tr class=clickableRow href='http://www.xkcd.com'>
        <td>2014</td>
        <td>ACADIA</td>
        <td>Denali</td>
    </tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
        <td>2014</td>
        <td>ACADIA</td>

 ....
 (SNIP)

Thanks.

Upvotes: 0

Views: 79

Answers (1)

Wilfredo P
Wilfredo P

Reputation: 4076

Use the Document.ready:

<script>
    $(document).ready(function(){
        $("tr").click(function() {
          window.location.href = $(this).attr("href");
        });
    });
</script>

Upvotes: 2

Related Questions