如何在 JavaScript 中制作可点击的单元格？

Question

I am using Data Table from CSS- bootstrap 4 data.tables https://datatables.net/examples/styling/bootstrap4

Please look at the image

The Row is clickable and it redirects me to another page1. BUT when I click on Find Location button, it does redirect me on page1 and page2 as well. I just want to go to page2. The code is below

index.php

  <tr onclick="xdata(this)">
                
    <td ><?php echo $event->description ? $event->description->type : null; ?></td>
    <td><?php echo $event->description ? $event->description->text : null; ?></td>                
    <td><?php echo $event->origin && $event->origin->time? $event->origin->time->value: null; ?></td> 
                
    <form method="get" action="findLocation.php">
    <input type="hidden" name="LongitudeValue" value="<?php echo $event->origin && $event->origin->longitude? $event->origin->longitude->value : null; ?>" />
                
<td><input type="submit" value="FIND LOCATION" style="margin: auto;  width: 100%;  border: 3px solid green;  padding: 1px;" /></td>
</form>
</td>

app.js

function xdata(e){
    
     // Shows how to get data from each column of this row
    c2 = e.children.item(1).innerHTML;  
   // open new page
  window.open('indexXML_SEARCH.php?SearchValue='+c2, '_blank');
}

HOW can I click my findLocation button without it redirecting me to page1 but to page2 because whenever I press the button it opens a new window for page1 and the current page is redirected to page2. I just want page2 when button is clicked.

Note that when I click on the row (not the button) everything works fine whereby the page1 must be loaded that is open in a new window!

I am reading from XML and displaying thus, this is the code:
I cannot merge both code in One line for example: 

if this php echo $event->origin && $event->origin->quality? HAS 
SOMETHING!!, it returns $event->origin->quality->usedPhaseCount ELSE 
null

<td><?php echo $event->origin && $event->origin->quality?  $event- 
>origin->quality->usedPhaseCount: null; ?></td>


I want it The input button below to be in the second condition :
<td><input onclick="func1(event)" type="submit" value="FIND LOCATION" 
style="margin: auto;  width: 100%;  border: 3px solid green;  padding: 
1px;" /></td>


What I want But Parse error: syntax error, unexpected token "<"

<td><?php echo $event->origin && $event->origin->quality? 
<input onclick="func1(event)" type="submit" value="FIND LOCATION" 
style="margin: auto;  width: 100%;  border: 3px solid green;  padding: 
1px;" />: null; ?></td>

Answer 1

The code is not clear and complete. However, I presume that you have defined onclick events for both <tr> and <td> tags and when you click the <td> , it also triggers the <tr> event. To prevent this, add this code at the end of your <td> event handler.

event.stopPropagation();