最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Place Click event on a table row but exclude one the columns - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

1 Answer 1

Reset to default 9

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>

发布评论

评论列表(0)

  1. 暂无评论