CODEWITHSUNDEEP
javascriptjquery
Poku
Poku

Reputation: 3188

Jquery: how to trigger td a when tr is clicked

I have a table where the first td in the trs contains a link. I want this anchor to be triggered (clicked) no matter where i click in the containing tr.

I have read and tried alot of recents post and suggentions on this topic but i can't get this to work. I tried the trigger() and triggerHandle() functions, but it does not trigger the anchor click that i want.

There must be others who have had the need to trigger a anchor click when a tr is clicked, so that the user doesn't have to click the tds anchor link. It sure is a nice UI feature if its possible?

Here is the code i have tried:

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" charset="utf-8">
        /* Initialise the table with the required column sorting data types */
        jQuery(document).ready(function () {
            jQuery("#rowClick tr").click(function (e) {
                jQuery("#clickevent", this).trigger("click");
            });
        });
    </script> 
</head> 
<body id="dt_example"> 
    <table id="rowClick">
        <thead>
            <tr>
                <th style="width: 30px">id</th>
                <th style="width: 200px">navn</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="datatabletext.asp?test=1" id="clickevent">1</a></td>
                <td>Jesper</td>
            </tr>
            <tr>
                <td><a href="datatabletext.asp?test=2" id="clickevent">2</a></td>
                <td>Bjarne</td>
            </tr>
            <tr>
                <td><a href="datatabletext.asp?test=3" id="clickevent">3</a></td>
                <td>Søren</td>
            </tr>                            
        </tbody>
    </table>
</body>

Upvotes: 3

Views: 3930

Answers (5)

dotcoder
dotcoder

Reputation: 2931

try the following

 $("#rowClick tr").click(function (e) {
                $(this).find('td:first a').trigger('click');
            });

Upvotes: 0

x1a4
x1a4

Reputation: 19485

        jQuery("#rowClick tr").click(function (e) {
            jQuery(this).find('td:first a').click();
        });

I should add that naugtur is correct in that this won't take you to another page, but anything that happens on the page itself will work fine.

Upvotes: 1

Jalada
Jalada

Reputation: 298

Following on from naugtur and Alessandro; with the tds changed to have a class of 'clickevent':

$(document).ready(function () {
    $("#rowClick tr").click(function (e) {
        document.location.href = $(this).find(".clickevent").attr('href');
    });
});

Upvotes: 4

Alessandro
Alessandro

Reputation: 1

Yeah, x1a4 is right. And remove the ids "clickevent" from your tds; the id attribute must be "a primary key" for a DOM element.

Upvotes: 0

naugtur
naugtur

Reputation: 16915

triggering clicks on a to reload the page is unavaliable due to security reasons.

try this way:

document.location.href=$aintd.attr('href');

$aintd is the a element You found

Upvotes: 2

Related Questions