从表格点击事件获取HTML表格的行索引-JQuery

Question

Can someone please help me crack this. I have a HTML table with an event when clicked to show a dialog. I also want to get the row index of the clicked row, but it only outputs something different.

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

The dialog shows as expected when the table is clicked but the output for row index is not what I want. It always outputs [object Object] . If the first row of the table was clicked, I expect the output to be 0 , second row should be 1 and so on. What am I doing wrong?

Answer 1

One problem is you're binding a click event to the whole table.

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

Try

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

Which means you're binding the event to each row in the table. Now inside the callback this will represent the row that was clicked.

You also don't need to use alert (as suggested by @cl3m) or even create a tr to output the index. You should be able to simply call:

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

and see the result in your browser's debugger.

Here's a working fiddle:

https://jsfiddle.net/860b9t73/

Answer 2

Check out the 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());
});