Comment savoir si un numéro de ligne est cliqué dans une table?

Une meilleure approche serait de déléguer l'événement, ce qui signifie l'attraper comme des bulles pour le nœud parent.

délégation - vue d'ensemble

Cette solution est à la fois plus robuste et plus efficace.

Il permet à l'événement pour être traités, même si plusieurs lignes sont ajoutées dynamiquement à la table plus tard, et aussi les résultats dans la fixation d'un seul gestionnaire d'événements pour le nœud parent (table élément), au lieu d'un pour chaque nœud enfant (tr élément).

En supposant que l'OP de l'exemple est une version simplifiée, la structure de la table peut être plus complexe, par exemple:

<table id="indexedTable">
    ...
    <tr>
        <td><p>1</p></td>
        <td>2</td>
        <td><p>3</p></td>
    </tr>
</table>

Par conséquent, une approche simpliste comme l'obtention d' e.target.parentElement ne fonctionne pas, cliquer sur l'interne <p> et en cliquant sur le centre de <td> va produire des résultats différents.

À l'aide de délégation normalise la gestion des événements, seulement en supposant qu'il n'y a pas de tables imbriquées.

mise en œuvre

Les deux extraits suivants sont équivalents:

$("#indexedTable").delegate("tr", "click", function(e) {
    console.log($(e.currentTarget).index() + 1);
});

$("#indexedTable").on("click", "tr", function(e) {
    console.log($(e.currentTarget).index() + 1);
});

Qu'ils attachent à un auditeur de table élément et gérer n'importe quel événement que les bulles se forment dans les lignes de la table. L'API actuelle est la on méthode et la delegate méthode est l'héritage de l'API (et en fait les appels on derrière les scènes).

Noter que l'ordre des paramètres pour les deux fonctions sont différentes.

exemple

Une comparaison entre l'effet direct de gestionnaire de l'attachement et de la délégation sont disponibles ci-dessous ou sur jsFiddle:

JS:

$("#table-delegate").on("click", "tr", function(e) {
  var idx = $(e.currentTarget).index() + 1;
  $("#delegation-idx").text(idx);  
  console.log('delegated', idx);
});

$("#table-direct tr").on("click", function(e) {
  var idx = $(e.currentTarget).index() + 1;
  $("#direct-idx").text(idx);
  console.log('direct', idx);
});

$('[data-action=add-row]').click(function(e) {
  var id = e.target.dataset.table;
  $('#' + id + ' tbody')
    .append($('<tr><td>extra</td><td>extra</td><td>extra</td></tr>')[0])
});

CSS:

tr:hover{
    background:#ddd;
}

button.add-row {
    margin-bottom: 5px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h1>Event handling test</h1>
<p>Add rows to both tables and see the difference in handling.</p>
<p>Event delegation attaches a single event listener and events related to newly added children are caught.</p>
<p>Direct event handling attaches an event handler to each child, where children added after the inital handler attachment don't have a handler attached to them, and therefore their indices won't be logged to console.</p>
<h2>Delegation</h2>
<p><span>row index: </span><span id="delegation-idx">unknown</span></p>
<button class="add-row" data-action="add-row" data-table="table-delegate">Add row to delegation</button>
<table id="table-delegate" class="table">
<tbody>
<tr>
<td>normal</td>
<td>normal</td>
<td>normal</td>
</tr>
<tr>
<td><p>nested</p></td>
<td><p>nested</p></td>
<td><p>nested</p></td>
</tr>
<tr>
<td>normal</td>
<td>normal</td>
<td><p>nested</p></td>
</tr>
</table>
<h2>Direct attachment</h2>
<p><span>row index: </span><span id="direct-idx">unknown</span></p>
<button class="add-row" data-action="add-row" data-table="table-direct">Add row to direct</button>
<table id="table-direct" class="table">
<tbody>
<tr>
<td>normal</td>
<td>normal</td>
<td>normal</td>
</tr>
<tr>
<td><p>nested</p></td>
<td><p>nested</p></td>
<td><p>nested</p></td>
</tr>
<tr>
<td>normal</td>
<td>normal</td>
<td><p>nested</p></td>
</tr>
</tbody>
</table>

Voici la démo sur jsFiddle.

P. S:

Si vous avez des tables imbriquées (ou, dans le cas général, souhaitent déléguer à des éléments spécifiques de la profondeur), vous pouvez utiliser cette suggestion de l'jQuery rapport de bug.

Simple et jQuery gratuit solution:

document.querySelector('#elitable').onclick = function(ev) {
//ev.target <== td element
//ev.target.parentElement <== tr
var index = ev.target.parentElement.rowIndex;
}

Bonus: Il fonctionne même si des lignes sont ajoutées/supprimées de façon dynamique

Dans certains cas, nous pourrions avoir un couple de tables, et puis nous avons besoin de détecter cliquez pour table en particulier. Ma solution est: est-ce

<table id="elitable" border="1" cellspacing="0" width="100%">
<tr>
<td>100</td><td>AAA</td><td>aaa</td>
</tr>
<tr>
<td>200</td><td>BBB</td><td>bbb</td>
</tr>
<tr>
<td>300</td><td>CCC</td><td>ccc</td>
</tr>
</table>
<script>
$(function(){
$("#elitable tr").click(function(){
alert (this.rowIndex);
});
});
</script>

DÉMO