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();
});
});
Share
Improve this question
edited Nov 23, 2015 at 16:46
Kyle Andersen
asked Nov 20, 2015 at 17:22
Kyle AndersenKyle Andersen
811 silver badge9 bronze badges
1 Answer
Reset to default 9you 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>