CODEWITHSUNDEEP
javascriptjquery
Gautam
Gautam

Reputation: 255

How to find which button is clicked: jquery

Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. I have included two templates with two different parent ids into one html template. I need to write the script in such a way that when add-btn having parentid == "#a" is clicked ,append rows to table having parentid =="#a".

result.html

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

Each template shares/extends a base.html template where all the common code is written

<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>

and my jquery code is

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>'
                    );

Issue: When i click add button, the row is appending to both the tables. and i dont want that. i want to add rows to the respective table. And i want to do that within same function.

I am looking for logic that i am missing here.

Thanks in advance

Upvotes: 1

Views: 124

Answers (2)

epascarello
epascarello

Reputation: 207501

Your code is using find which looks for a child of the button. It is not a child, it is a sibling of the parent div of the button.

$(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);

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Firstly as per markup, there is no parent child relation between add button and table. Though, there can be many ways of fixing this issue. Proposing 1 option below

Let us say you have both buttons with class add and a data attribute (data-id) containing id of table.

i.e. 1st button having data-id="a" and second button having data-id="b" where a and b are the ids of respective tables.

Now update your js to following

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

Upvotes: 1

Related Questions