HI, I need some help on this how to do this in JavaScript…my tr onclick will fires after i press cancel in the confirm message of my td.or after i delete a record it will fires my onclick display…what i want is, if i will delete the record or cancel my, display onclick should not fires.
<table>
<tr onclick=display"()">
<td> 1 </td>
<td> computer table </td>
<td> 2000</td>
<td a onclick="return confim('are you sure you want to delete this?')" href="deletepage.php">Delete</td>
</tr>
</table>
So you want the display() function to be executed when the user clicks on the table row, unless they click on the “Delete” table cell, in which case you want the user to answer a confirm dialogue.
Correct?
Ok then, first off, get rid of the inline event handlers, then use event delegation.
This involves catching the click on the table, examining what triggered it and reacting accordingly:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Event delegation example</title>
</head>
<body>
<table id="myTable">
<tr>
<td>1</td>
<td>Computer table</td>
<td>2000</td>
<td><a href="deletepage.php">Delete</td>
</tr>
</table>
<script>
var myTable = document.getElementById('myTable');
myTable.addEventListener('click', function(event) {
var target = event.target;
if(target.tagName === 'A'){
if(!confirm('Are you sure you want to delete this?')){
event.preventDefault();
}
} else if(target.tagName === 'TD'){
console.log('The display function would go here');
}
});
</script>
</body>
</html>
HI pullo, it’s working thank you, but i have another problem…i could not get the id of my tr…because before i use the onclick and put some parameters in the display function.
now i removed display(),and put it on the elseif statement as what your example shows…now i am confuse on how to get the studntid and put it on the display function.
You should get rid of the confirm - that was used for debugging in older browsers before they all had a built in debugger. Some browsers display additional options for debugging use in the confirm box asking your visitors to disable dialogs or JavaScript on your page.