如何在 JavaScript 中制作可點擊的單元格？

Question

我正在使用 CSS-bootstrap 4 data.tables 中的數據表https://datatables.net/examples/styling/bootstrap4

請看圖片

該行是可點擊的，它將我重定向到另一個頁面 1。 但是，當我單擊“查找位置”按鈕時，它也會在 page1 和 page2 上重定向我。 我只想go到page2。 代碼如下

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>

應用程序.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');
}

我如何才能單擊我的 findLocation 按鈕而不會將我重定向到 page1 但到 page2 因為每當我按下按鈕時它都會為 page1 打開一個新的 window 並且當前頁面被重定向到 page2。 單擊按鈕時我只想要 page2。

請注意，當我單擊該行（而不是按鈕）時，一切正常，因此必須加載在新窗口中打開的 page1！

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

代碼不清晰，不完整。 但是，我假設您已經為<tr>和<td>標簽定義了 onclick 事件，當您單擊<td>時，它也會觸發<tr>事件。 為防止這種情況，請在<td>事件處理程序的末尾添加此代碼。

event.stopPropagation();