0

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

Improve this question
3
  • "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. Commented Jun 28, 2013 at 8:20
  • Not really necessary here @CBroe - it is clear what is going to be rendered Commented Jun 28, 2013 at 8:30
  • It's still stupid IMHO to post server-side code for a client-side problem. Commented Jun 28, 2013 at 8:30

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

preventDefault is not what I would choose which I expect is the checking of the checkbox.
0

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>';
Improve this answer

Comments