Extracting the column data corresponding to the button which is clicked in the same table row

user_16014373 0
Viewed 90

enter image description hereI am working on deleting functionality. Based on the search the table generates rows along with the delete buttons. when the button is clicked, the show id column value should be extracted from the table column and it should be sent to backend through ajax.

As a first step i am trying to extract show id column value from the same row where the delete button is clicked. but i am facing two issues

  1. When i try to click the delete button, other search button is getting triggered.
  2. I am not able to extract show id column value corresponding to the button click of the same row.

<script>
    
            $(document).ready(function(){
            
            $('#search-movie').on('submit',function (e) {
                 $.ajax({
                  type: 'POST',
                  url: '/search',
                  data: $('#search-movie').serialize(),
                   success: function (q) {
                   
                    var trHTML='';
                    $.each(q, function (i, userData) {
                                for(j=0; j<userData.length; j++)
                                {
                           
                                trHTML +=
                                        '<tr><td style="padding-right: 10px">'
                                        + userData[j].showid
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].typeof
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].title
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].directors
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].cast
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].country
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].releaseyear
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].rating
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].duration
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].listedin
                                        + '</td><td style="padding-right: 10px">'
                                        + userData[j].description
                                        // + '</td></tr style="padding-right: 10px">'
                                        + '</td><td style="padding-right: 10px">'
                                        + '<button id="button2" class="btn btn-info" onClick="clickme()">delete</button>'
                                        + '</td></tr>'
                                }
                        });
                        $('#table1').append(trHTML);
                   
                   }
                  });
                 e.preventDefault();
                 });
            
            })
            </script>
            <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>
 <div class="form-group">
            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
            <button class="btn btn-info btn-md" id="button1" onClick="window.location.reload();">reset</button>
        </div>
        <table id="table1" name="table1">
            <thead>
                <tr>
                   <th style="padding-right: 10px">Show ID</th>    
                   <th style="padding-right: 10px"> Type</th>    
                   <th style="padding-right: 10px">Title</th>    
                   <th style="padding-right: 10px">Director</th>
                   <th style="padding-right: 10px">Cast</th>
                   <th style="padding-right: 10px">Country</th>
                   <th style="padding-right: 10px">Release Year</th>
                   <th style="padding-right: 10px">Rating</th>
                   <th style="padding-right: 10px">Duration</th>
                   <th style="padding-right: 10px">Listed In</th>
                   <th style="padding-right: 10px">Description</th>
    
                </tr>
              </thead>
              <tbody>
              </table>

jquery javascript
1 Answers

Issue 1: This is due to button vs input type='submit'

seems your form submission happening and it goes to search functionality - when you click the delete button.

Use input type=button (Solution1)

or button on click as return false to avoid submission (solution 2)

Note: Don't forget, type="submit" is the default with button, so leave it off! Ref: input type="submit" Vs button tag are they interchangeable? 2. For on click, you can attach event using the CSS value. $(".btn btn-info").click(function() { .... or in DOM attach the clickme in onClick. Not required to have bot in the function definition.

 <script>
                function clickme()
                {
                    $(".btn btn-info").click(function() {
                    var $item = $(this).closest("tr").find(".nr").text();         
                    console.log($item);         
                    $("#table1").append($item);       
                });
                }
            </script>
user_25448100
Related