将Click事件放在表格行上，但排除其中一列

Place Click event on a table row but exclude one the columns

本文关键字：排除 一列 事件 Click 表格      更新时间：2023-09-26

我有一个表，其中的行是可点击的。当您单击它们时，包含隐藏div的beneth行将展开，从而显示相关数据的嵌套表。这是我想要的方式
问题是表的最后一列有一个编辑按钮。当按下编辑按钮时，行将在重定向到编辑页面之前展开。这看起来很邋遢。是否有任何方法可以仅从该列中删除该事件？

这是我的密码。这是Django模板BTW.

HTML

<table id="exp" class="feedtable table table-hover table-bordered ">
    <thead>
        <tr>
            <th>Scales</th><th>Type</th><th>Edit</th>
        </tr>
    </thead>
    <tbody>
        {% for scale in scales %}
        <tr>
            <td><p class="scalet">{{scale}}<p></td><td>{{scale.calc_type}}</td><td><a href="{% url 'questions:edit_feedback' scale.pk %}" class="btn btn-default">Edit</td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="{{scale.pk}}div">
                    <table id="{{scale.pk}}table" class="feedtable table-hover table-bordered">
                        {% for question in questions %}
                        {% if question.scale == scale%}
                            <tr>
                                <td>{{question | safe}}</td><td><a class='btn btn-default' href="{% url 'questions:edit_question' question.pk %}">Edit</td>
                            </tr>
                        {% endif %}
                        {% endfor %}
                    </table>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

JQuery

$(function() {
    $("td[colspan=3]").find("div").hide();
    $("tr").click(function(event) {
        console.log("hit")
        var $target = $(event.target);
        $target.closest("tr").next().find("div").slideToggle();                
    });
});

您可以使用event.target对象和类，例如）如果列具有"特定类（或属性）"，则可以删除事件

$(document).ready(
	function(){
        $("tr").click(function(event){
            console.log($(event.target).hasClass("except"));
        });
    }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
      <td class="except">except</td>
      <td>data</td>
  </tr>
</table>

相关文章：