I have a table where the rows are clickable. when you click on them the row beneth them containing a hidden div is expanded, exposing a nested table of related data. That works the way I had intended.
The problem is that the last column of the table has an edit button. when the edit button is pressed the row is expanded right before it redirects to edit page. This looks very sloppy. is there any way to remove the event from that column only?

Here is my code. This is a Django Template 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();                
    });
});

I have a table where the rows are clickable. when you click on them the row beneth them containing a hidden div is expanded, exposing a nested table of related data. That works the way I had intended.
The problem is that the last column of the table has an edit button. when the edit button is pressed the row is expanded right before it redirects to edit page. This looks very sloppy. is there any way to remove the event from that column only?

Here is my code. This is a Django Template 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();                
    });
});

• javascript
• jquery
• html
• django

1 Answer 1

you can use event.target object and class, e.g.) if a column has "a specific class(or attribute)", you can remove the event

$(document).ready(
	function(){
        $("tr").click(function(event){
            console.log($(event.target).hasClass("except"));
        });
    }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
      <td class="except">except</td>
      <td>data</td>
  </tr>
</table>