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>

单击表时，对话框显示为预期，但行索引的输出不是我想要的。它始终输出 [object Object] 。如果单击表格的第一行，我希望输出为 0 ，第二行应为 1 依此类推。我做错了什么？

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

从表单击事件获取HTML表的Row索引 - JQuery

2 个答案: