Problem on these onclick

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>


Thank you in advance

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?

Yes :slight_smile:

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>

Any questions, just let me know.

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.

something like this.

<tr class="myclass" onclick="display('.$studntid.');">

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.

Thank you in advance.

Could you post the HTML of one of your tables?

here it is…


<table id="mytable">
<tbody>
<tr id="mytr" class="row0" value="0084">
   <td>Maria</td>
   <td>Garcia</td>
   <td>23</td>
</tr>
<tr id="mytr" class="row1" value="0078">
   <td>Jenny</td>
   <td>Falcone</td>
   <td>27</td>
</tr>
<tr id="mytr" class="row0" value="0043">
   <td>Mark</td>
   <td>Miller</td>
   <td>26</td>
 </tr>
<tr id="mytr" class="row1" value="0016">
   <td>Michelle</td>
   <td>Maddeline</td>
   <td>24</td>
</tr>

</tbody>
</table>

Hi pullo is it possible to get the value of tr by using there id in javascript.?

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.

Hey jemz,

Your <tr> elements all have the same id.
That will stop things from working. You’ll need to change that to a class or something.

Anyway, I would just store the parameters as a data attribute on the respective elements and access them from the event handler:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Event delegation example</title>
  </head>
  
  <body>
    <table id="myTable">
      <tbody>
        <tr class="row0" data-value="0084">
          <td>Maria</td>
          <td>Garcia</td>
          <td>23</td>
          <td><a href="deletepage.php">Delete</td>
        </tr>
        <tr class="row1" data-value="0078">
          <td>Jenny</td>
          <td>Falcone</td>
          <td>27</td>
          <td><a href="deletepage.php">Delete</td>
        </tr>
        <tr class="row0" data-value="0043">
          <td>Mark</td>
          <td>Miller</td>
          <td>26</td>
          <td><a href="deletepage.php">Delete</td>
        </tr>  
        <tr class="row1" data-value="0016">
          <td>Michelle</td>
          <td>Maddeline</td>
          <td>24</td>
          <td><a href="deletepage.php">Delete</td>
        </tr>   
      </tbody>
    </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('This row has a value of ' + target.parentNode.dataset.value);
        }
      });
    </script>
  </body>
</html>