如何查找单击了哪个按钮：jquery

Question

总结： 我有一个 html 页面，其中包含两个添加按钮和两个表格。单击添加按钮时，行将附加到相应的表中。我在一个 html 模板中包含了两个具有两个不同父 ID 的模板。我需要以这样一种方式编写脚本，即当单击具有 parentid ==“#a”的 add-btn 时，将行附加到具有 parentid =="#a" 的表中。

结果.html

//i am using django web framework
<div class="reports">        
    {% include 'template1.html' with id="a" %}
    {% include 'template2.html' with id="b" %}
</div>

每个模板共享/扩展一个 base.html 模板，所有通用代码都在其中编写

<div class="panel">
    <div>
    <button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
                        <i class="fa fa-plus"></i>
                        Add
                    </button>
                </div>

            <div class ="configuration-table panel-body">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th>Remove</th>
                            <th>Layer</th>
                            <th>Display</th>
                            <th>Unit</th>
                            <th>Dataset</th>
                            <th>Ordering</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
</div>

我的 jquery 代码是

result.js

    $('.reports').on('click','#a .add, #b .add', function(e) {
//how to differentiate two tables here.
    $(this).find('configuration-table table').children('tbody')
                    .append(
                        '<tr>'+
                        '<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
                        '<td>'+layer_text+'</td>'+
                        map_elements+
                        '<td>'+unit_text+'</td>'+
                        '<td>'+dataset_text+'</td>'+
                        '<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
                        '</tr>'
                    );

问题：当我单击添加按钮时，该行将附加到两个表中。我不想要那个。我想将行添加到相应的表中。我想在同一个函数中做到这一点。

我正在寻找我在这里缺少的逻辑。

提前致谢

Answer 1

您的代码正在使用 find 来查找按钮的子项。它不是子元素，它是按钮的父 div 的兄弟。

$(this)  //button that was clicked
   .parent() //div around the button
     .sibling(".configuration-table")  //sibling element that has the table
       .find("table tbody")  //the table
         .append(tableRow);

Answer 2

首先根据标记，添加按钮和表格之间没有父子关系。不过，可以有很多方法来解决这个问题。在下面提出 1 个选项

假设您有两个类为add 的按钮和一个包含表id 的数据属性（data-id）。

即第一个具有 data-id="a" 的按钮和具有 data-id="b" 的第二个按钮，其中 a 和 b 是各个表的 id。

现在更新你的 js 来关注

.on('click','.add', function(e) {
     var table_id = $(this).data("id");
     $("#"+table_id).children('tbody').append..... // your code
}