Event onclick on <td> and <tr>

you can use el in your function input and pass the variable to it, in every where you wanna call it.

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function colorChanger(el){
    el.style.backgroundColor = '#007d00';
}

</script>
</head>
<body>
  <table>
    <tr onclick="colorChanger(this);">
      <td onclick="colorChanger(this);">click me</td>
    </tr>
  </table>
</body>
</html>

You need to stop the propagation of the event. to access the event object you need to use it as parameter of your function tdclick

function trclick(){console.log('tr clicked')};

function tdclick(event){
    console.log('td clicked'); 
    event.stopPropagation()
};
<table><tbody>
<tr onclick='trclick();'>
<td>Column 1</td>
<td>Column 2</td>
<td onclick='tdclick(event);'>Column 3</td>
</tr>
</tbody></table>

What you need to do is to stop the propagation of the parent event when a child is clicked, it's easy done in jQuery, but naively you need to do a little more work:

function trclick(){
    console.log('tr clicked')
};

function tdclick(e){ 
    if (!e) var e = window.event;                // Get the window event
    e.cancelBubble = true;                       // IE Stop propagation
    if (e.stopPropagation) e.stopPropagation();  // Other Broswers
    console.log('td clicked');
};

Note, for Firefox you need to pass a event parameter:

<td onclick='tdclick(event)'>Column 3</td>

Tags:

Javascript

Recent Posts