我想在单击该tr中的按钮时找到最接近的td

时间:2017-02-14 13:21:42

标签: javascript jquery button

问题是,即使单击第二个按钮,它也只能找到第一个凭据。所以我希望如果我点击第二个按钮,它应该给我那个按钮与用户名和密码最近的td



$(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>
&#13;
&#13;
&#13;

JS小提琴https://jsfiddle.net/parag_bandewar/c8w73rup/

3 个答案:

答案 0 :(得分:3)

问题是因为您正在使用类选择器来查找所有.loginPasswordthis元素。

相反,您可以使用closest('tr')关键字来引用引发事件的元素来修复逻辑。从那里,您可以使用find()获取行,并each()选择所需的元素。另请注意,您不需要click()来电。您可以将.jsLoginButton直接应用于所有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); }); });元素的集合。试试这个:

&#13;
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用tr获取find,然后使用td获取您想要的$(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(); }); }); }); 。像这样:

row = image[height, 0:-1]

答案 2 :(得分:0)

试试这个

&#13;
&#13;
$(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();
    });
  });
&#13;
<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>
&#13;
&#13;
&#13;