Получение индекса строки таблицы HTML из события щелчка таблицы - JQuery

Question

Может кто-то, пожалуйста, помогите мне взломать это. У меня есть таблица HTML с событием при нажатии, чтобы показать диалог. Я также хочу получить индекс строки щелкнутой строки, но он выводит только что-то другое.

//script for the table event 
<script> 
    $(function() { 
     $("#table").click(function(){ 

      $("#dialog-modal1").dialog({ 
       height: 140, 
       modal: true, 
       title:"Search Item", 
       width : 440, 
       position: {my: "top", at: "bottom", of: "#table"} 
      }); 
      $("#dialog-modal1").show(); 

      var row = $('<tr></tr>').text($(this).index()); 
      alert(row); 

     }); 
    }); 
</script> 

Диалог показывает, как ожидается, когда нажата таблица, но вывод индекса строки не является тем, что я хочу. Он всегда выводит [объект Объект]. Если первая строка таблицы была нажата, я ожидал выхода быть , вторая строка должна быть и так далее. Что я делаю не так?

Answer 1

Одна из проблем заключается в том, что вы привязываете событие click ко всей таблице.

$("#table").click(function() { ... 

Попробуйте

$("#table tr").click(function() { ... 

Это означает, что вы связывание события каждой строку в таблице. Теперь в обратном вызове this будет отображаться строка, на которую была нажата кнопка.

Вам также не нужно использовать оповещение (как предложено @ cl3m) или даже создать tr для вывода индекса. Вы должны иметь возможность просто позвонить:

console.log($(this).index()); 

и посмотреть результат в отладчике вашего браузера.

Вот рабочая скрипку:

https://jsfiddle.net/860b9t73/

Answer 2

Отъезд JsFiddle demo

HTML

<table> 
    <tr> 
    <td>FIRST</td> 
    </tr> 
    <tr> 
    <td>SECOND</td> 
    </tr> 
    <tr> 
    <td>THIRD</td> 
    </tr> 
</table> 
<div id="result"></div> 

JS

$('tr').click(function(){ 
    var $tr = $(this); 
    $('#result').html("index clicked: " + $tr.index()); 
});