I want to find the closest td when button in that tr is clicked

Question

The problem is that even if 2nd button is clicked, it is finding first credentials only. So I want that if I click on the second button, it should give me that button's closest td with username and password

 $(document).ready(function() { $(".jsLoginButton").each(function() { $(this).click(function() { //Get login details configuration.loginPage.LOGIN_ID = $('.loginID').closest('td').filter(':first').text(); configuration.loginPage.LOGIN_PASSWORD = $('.loginPassword').closest('td').filter(':first').text(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th style="padding: 3px">Username</th> <th style="padding: 3px">Password</th> <th style="padding: 3px">Action</th> </tr> </thead> <tr> <td style="padding: 3px" class="loginID">abc.user1@gmail.com</td> <td style="padding: 3px" class="loginPassword">Asdf1234!</td> <td style="padding: 3px"> <button class="jsLoginButton">login</button> </td> </tr> <tr> <td style="padding: 3px" class="loginID">xyz@gmail.com</td> <td style="padding: 3px" class="loginPassword">Asdf1234!</td> <td style="padding: 3px"> <button class="jsLoginButton">login</button> </td> </tr> </table> 

JS Fiddle https://jsfiddle.net/parag_bandewar/c8w73rup/

Answer 1

The issue is because you're using a class selector to find all the .loginID and .loginPassword elements.

Instead you can fix the logic by using the this keyword to reference the element that raised the event. From there you can use closest('tr') to get the row, and find() to select the required elements. Also note that you don't need the each() call. You can apply click() directly to the collection of all .jsLoginButton elements. Try this:

 var configuration = { loginPage: {} } $(document).ready(function() { $(".jsLoginButton").click(function() { var $tr = $(this).closest('tr'); configuration.loginPage.LOGIN_ID = $tr.find('.loginID').text(); configuration.loginPage.LOGIN_PASSWORD = $tr.find('.loginPassword').text() console.log(configuration); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th style="padding: 3px">Username</th> <th style="padding: 3px">Password</th> <th style="padding: 3px">Action</th> </tr> </thead> <tr> <td style="padding: 3px" class="loginID">abc.user1@gmail.com</td> <td style="padding: 3px" class="loginPassword">Asdf1234!</td> <td style="padding: 3px"> <button class="jsLoginButton">login</button> </td> </tr> <tr> <td style="padding: 3px" class="loginID">xyz@gmail.com</td> <td style="padding: 3px" class="loginPassword">Asdf1234!</td> <td style="padding: 3px"> <button class="jsLoginButton">login</button> </td> </tr> </table> 

Answer 2

Use closest to get the tr , from there use find to get the td you want. Like this:

$(document).ready(function() {
  $(".jsLoginButton").each(function() {
    $(this).click(function() {
      //Get login details
      configuration.loginPage.LOGIN_ID = $(this).closest('tr').find('.loginID').text();
      configuration.loginPage.LOGIN_PASSWORD = $(this).closest('tr').find('.loginPassword').text();

    });
  });
});

Answer 3

Try This

 $(document).ready(function() { $(".jsLoginButton").click(function() { configuration.loginPage.LOGIN_ID = $(this).closest('td').siblings('.loginID').text(); configuration.loginPage.LOGIN_PASSWORD =$(this).closest('td').siblings('.loginPassword').text(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th style="padding:3px">Username</th> <th style="padding:3px">Password</th> <th style="padding:3px">Action</th> </tr> </thead> <tr> <td style="padding:3px" class="loginID">abc.user1@gmail.com</td> <td style="padding:3px" class="loginPassword">Asdf1234!</td> <td style="padding:3px"> <button class="jsLoginButton">login</button> </td> </tr> <tr> <td style="padding:3px" class="loginID">xyz@gmail.com</td> <td style="padding:3px" class="loginPassword">Asdf1234!</td> <td style="padding:3px"> <button class="jsLoginButton">login</button> </td> </tr> </table>