CODEWITHSUNDEEP
javascriptjquerybutton
Parag Bandewar
Parag Bandewar

Reputation: 297

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

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">[email protected]</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">[email protected]</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/

Upvotes: 1

Views: 2748

Answers (3)

Parithiban
Parithiban

Reputation: 1656

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">[email protected]</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">[email protected]</td>
    <td style="padding:3px" class="loginPassword">Asdf1234!</td>
    <td style="padding:3px">
      <button class="jsLoginButton">login</button>
    </td>
  </tr>
</table>

Upvotes: 0

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

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

    });
  });
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337610

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">[email protected]</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">[email protected]</td>
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td>
    <td style="padding: 3px">
      <button class="jsLoginButton">login</button>
    </td>
  </tr>
</table>

Upvotes: 3

Related Questions