Ich möchte die nächste td finden, wenn die Schaltfläche in diesem tr geklickt wird

Das Problem ist, dass selbst wenn die zweite Schaltfläche angeklickt wird, es nur erste Anmeldeinformationen findet. Also, was ich will, wenn ich auf die zweite Schaltfläche klicken, sollte es geben Sie mir, dass die Taste engster td mit Benutzername und PasswortIch möchte die nächste td finden, wenn die Schaltfläche in diesem tr geklickt wird

$(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/

Quelle

2017-02-14 Parag Bandewar

Welche td wünschen Sie? –

Nächste nach oder vor? –

Wenn ich auf den zweiten Login-Button klicke, sollte er [email protected] und nicht [email protected] wählen. –

Das Problem ist, weil Sie‘ Verwenden Sie einen Klassenselektor, um alle .loginID und .loginPassword Elemente zu finden.

Stattdessen können Sie die Logik reparieren, indem Sie das Schlüsselwort this verwenden, um auf das Element zu verweisen, das das Ereignis ausgelöst hat. Von dort können Sie closest('tr') verwenden, um die Zeile zu erhalten, und find(), um die erforderlichen Elemente auszuwählen. Beachten Sie auch, dass Sie den Anruf each() nicht benötigen. Sie können click() direkt auf die Sammlung aller .jsLoginButton Elemente anwenden. Versuchen Sie folgendes:

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>

Quelle

2017-02-14 13:24:49

Vielen Dank. Es funktionierte. –

Verwenden closest, um die tr zu bekommen, von dort find verwenden die td Sie wollen zu bekommen. Wie folgt aus:

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

    }); 
    }); 
});

Quelle

2017-02-14 13:25:19

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>

Quelle

2017-02-14 13:34:15 Parithiban

Ich möchte die nächste td finden, wenn die Schaltfläche in diesem tr geklickt wird

Antwort

Verwandte Themen