Comment obtenir le rang de l'élément dans la cellule par javascript/jquery?

J'ai un tableau simple comme ça

<table id="tempTable">
    <tbody>
        <tr id="row_01">
            <td>
                <button onclick="btnclick(this);" >Save Row</button>
            </td>
        </tr>
        <tr id="row_02">
            <td>
                <button onclick="btnclick(this);" >Save Row</button>
            </td>
        </tr>
    </tbody>
</table>

function btnclick(e) {
    var currentRow = $(e).parent().parent();
    alert(currentRow.id);
}

Je veux déterminer la ligne où le bouton a été cliqué placé. Donc, j'utilise de la méthode jquery dans btnclick() comme vous le voyez abow. Mais parfois, je ne sais pas comment le niveau de profondeur le bouton a été placé dans la rangée (), donc je cherche un moyen d'obtenir un ancêtre par tag <tr> d'un élément.

Quelqu'un m'aider, merci?

InformationsquelleAutor StevenChow | 2012-03-18
  1. 11

    Essayez ceci : 

    function btnclick(e) {
    var currentRow = $(e).closest('tr');
    alert(currentRow.id);
}

    La closest() fonction sera de retour le plus proche ancêtre référencé par son sélecteur. Dans ce cas, le sélecteur est une simple <tr> élément.

    Prises à partir de la jQuery docs :

    .la plus proche( sélecteur )

    Obtenir le premier élément qui correspond au sélecteur, en commençant à l'élément en cours et progresse jusqu'à travers l'arborescence DOM.

    Une meilleure méthode pourrait être utilisé si vous modifiez votre code HTML un peu. Si vous avez placé la même classe sur chacun de vos boutons.

    Par exemple :

    <td>
  <button class="myBtnClass" >Save Row</button>
</td>

    Alors votre jQuery devrait ressembler à ceci :

    $(".myBtnClass").on('click',function(){
    var currentRow = $(this).closest('tr');
    alert(currentRow.attr('id'));
});

    Cette fonction permettra de capturer d'un clic sur tout élément avec la .myBtnClass classe.

    • Belle explication!
    • Merci @TJ. - j'espère que les OP se sent de la même façon 🙂
    InformationsquelleAutor Lix
  2. 2

    Le jQuery façon est:

    $('#tempTable').find('button').click(function() {
    var currentRow = $(this).closest('tr');
});
    InformationsquelleAutor xdazz
  3. 2

    comment à propos de l'utilisation la plus proche

    function btnclick(e) {
    var currentRow = $(e).closest('tr');
    alert(currentRow.id);
}
    InformationsquelleAutor Jayanga