HTML Table row with link not checking checkbox

Question

i have a HTML table echoed in PHP:

echo '<tr class="notfirst" style="cursor:pointer;" onclick="document.location=\'editinvoice.php?seq='.$result["sequence"].'&inv='.$result["invoice_number"].'\'">
                <td width="20"><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" onclick=\'add('.$total.', this);\' /></td>
                <td width="150">'.$result["invoice_number"].'</td>
                <td width="250">'.$company.'</td>
                <td width="100">'.$date.'</td>
                <td width="100">&pound;'.$result["total"].'</td>
                <td width="100">&pound;'.$result["total"].'</td>
            </tr>';

so when you hover over it, it highlights the whole row and wherever you click on the row it opens the link but when i check the checkbox it also opens the link - i want to stop this

_"i have a HTML table echoed in PHP"_ - you want to discuss a _client-side_ problem here, so _server-side_ code is most uninteresting. Post the code the client receives. — CBroe, Jun 28 '13 at 08:20
Not really necessary here @CBroe - it is clear what is going to be rendered — mplungjan, Jun 28 '13 at 08:30
It's still _stupid_ IMHO to post server-side code for a client-side problem. — CBroe, Jun 28 '13 at 08:30

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

I think it is better to seperate your javascriptcode from the html markup. This way you have more control over it.

Take a look at the bubbling phases in javascript. and look at preventdefault I hope this helps

edited May 23 '17 at 12:11

Community

1
1

answered Jun 28 '13 at 08:16

Jordy van Eijk

2,718
2
19
37

preventDefault is not what I would choose which I expect is the checking of the checkbox. – mplungjan Jun 28 '13 at 08:30

mplungjan · Answer 2 · 2013-06-28T08:33:04.610

I would use event.stopPropagation()

Here is a jQuery version since it is much easier to do, but you can rewrite it in DOM access if you must. If you do, you also need to add event.cancelBubble=true for IE<9

$(function() {
  $(".notfirst").on("click",function() {
    location = "editinvoice.php?seq="+$(this).data("seq")+"&inv="+$(this).data("inv");
  });
  $("checkbox[name^=check]).on("click",function(event) {
    event.stopPropagation();
    add($(this).data("total");
  });
});

using this code:

echo '<tr class="notfirst" style="cursor:pointer;" data-seq="'.$result["sequence"].'" data-inv="'.$result["invoice_number"].'">
  <td width="20"><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" data-total="'.$total.'" /></td>
            <td width="150">'.$result["invoice_number"].'</td>
            <td width="250">'.$company.'</td>
            <td width="100">'.$date.'</td>
            <td width="100">&pound;'.$result["total"].'</td>
            <td width="100">&pound;'.$result["total"].'</td>
        </tr>';

HTML Table row with link not checking checkbox

2 Answers2