带有链接的 HTML 表格行未选中复选框 [重复]

Posted 2023-02-21

【中文标题】带有链接的 HTML 表格行未选中复选框 [重复]

【英文标题】：HTML Table row with link not checking checkbox [duplicate]

【发布时间】：2013-06-25 22:59:38

【问题描述】：

我有一个用 php 回显的 html 表格：

echo '<tr class="notfirst" style="cursor:pointer;" onclick="document.location=\'editinvoice.php?seq='.$result["sequence"].'&inv='.$result["invoice_number"].'\'">
                <td ><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" onclick=\'add('.$total.', this);\' /></td>
                <td >'.$result["invoice_number"].'</td>
                <td >'.$company.'</td>
                <td >'.$date.'</td>
                <td >&pound;'.$result["total"].'</td>
                <td >&pound;'.$result["total"].'</td>
            </tr>';

因此，当您将鼠标悬停在它上面时，它会突出显示整行，无论您单击该行，它都会打开链接，但是当我选中复选框时，它也会打开链接 - 我想停止此操作

【问题讨论】：

"我有一个在 PHP 中回显的 HTML 表格" - 你想在这里讨论 客户端 问题，所以 server-侧面 代码是最无趣的。发布客户端收到的代码。

这里没有必要@CBroe - 很清楚将要呈现什么

对于客户端问题发布服务器端代码仍然是愚蠢恕我直言。

【参考方案1】：

我会使用event.stopPropagation()

这是一个 jQuery 版本，因为它更容易实现，但如果需要，您可以在 DOM 访问中重写它。如果你这样做，你还需要为IE添加event.cancelBubble=true

$(function() 
  $(".notfirst").on("click",function() 
    location = "editinvoice.php?seq="+$(this).data("seq")+"&inv="+$(this).data("inv");
  );
  $("checkbox[name^=check]).on("click",function(event) 
    event.stopPropagation();
    add($(this).data("total");
  );
);

使用此代码：

echo '<tr class="notfirst" style="cursor:pointer;" data-seq="'.$result["sequence"].'" data-inv="'.$result["invoice_number"].'">
  <td ><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" data-total="'.$total.'" /></td>
            <td >'.$result["invoice_number"].'</td>
            <td >'.$company.'</td>
            <td >'.$date.'</td>
            <td >&pound;'.$result["total"].'</td>
            <td >&pound;'.$result["total"].'</td>
        </tr>';

【参考方案2】：

我认为最好将 javascriptcode 与 html 标记分开。这样您就可以更好地控制它。

看看 javascript 中的bubbling phases。看看preventdefault 我希望这会有所帮助

【讨论】：

preventDefault 不是我会选择的，我希望检查复选框。