Comment savoir quelle ligne a été cliquée?

Question

Après-midi,

dire que j'ai une table comme si

<table id="foo"> 
    <tr><td><!-- label --><!-- textbox --></td><tr> 
    <tr><td><!-- label --><!-- textbox --></td><tr> 
    <tr><td><!-- label is bar --><!-- textbox --></td><tr> 
    <tr><td><!-- label --><!-- textbox --></td><tr> 
    <tr><td><!-- label --><!-- textbox --></td><tr> 
</table> 

comment pourrais-je en JQuery déterminer l'indice de la ligne qui a eu il est modifié zone de texte (sur le flou)? Donc, si un utilisateur ajoute une valeur à la zone de texte sur la troisième ligne ("label is bar"), je pourrais alerter l'index de la ligne (dans ce cas 2)?

Je suppose que j'obtiendrais l'identifiant de la table, effectuerais un chaque sur le tr, puis trouverais la boîte de texte utilisant des enfants et quand cet enfant a son événement onblur activé nous utiliserions alors parent pour produire l'index?

Des idées?

Merci

Answer 1

$("input[type=text]").blur(function() { 
    alert($(this).closest("tr").index()); 
}); 

Cette attache l'événement blur à tous input éléments avec type="text". Vous pouvez affiner ce sélecteur pour sélectionner uniquement les entrées dans votre tableau.

Dans la fonction de gestionnaire d'événements, il reçoit le plus proche tr (à savoir, le premier élément ancêtre de this qui est un tr, et obtient l'indice de cela).

Voici un example fiddle le montrant en action.

Comme noté dans une autre réponse, vous pouvez réellement rechercher l'événement change, plutôt que l'événement blur comme vous le dites dans votre question. L'événement change se déclenche lorsque la valeur de l'entrée change réellement, par opposition à chaque fois qu'elle perd le focus. Si c'est le cas, changez simplement le mot blur en change.

Answer 2

mal lu la question, l'éditer!

$('#foo tr td').click(function() { 
    alert($(this).index()); 
}); 

Answer 3

Vous devez ajouter un gestionnaire pour l'événement approprié, par ex. flou ou ce que vous voulez, pour le champ de saisie et à l'intérieur du gestionnaire trouver la ligne (tr) en utilisant le parent (comme vous l'avez dit). par exemple.

$('.testFieldsClass').blur(function() { 
    //first parent is td, second is tr take it and do whatever! 
    var currentTR = $(this).parent().parent(); 

    //... do something in curretnTR 
}); 

NOTE: Dans mon exemple, je suppose que tous les champs de texte ont une classe nommée testFieldsClass, plus facile pour le sélecteur. AUSSI, dans mon exemple, je n'attrape que l'événement de flou pour les champs de texte.

Answer 4

$('#foo tr').click(function(){ 
    console.log($(this).index()); 
}) 

Answer 5

Par modifié vous entendez onchange?

Si oui, vous pouvez faire:

$("#foo input").change(function(){ 
    alert($('#foo td').index($(this).parent())); 
});