javascript - 查找包含文本 JQuery 的表行索引

Question

我正在尝试从表上的链接中查找表行索引。我正在尝试的代码总是返回值 3。我的页面上有两行。我的代码是 -

表格(示例)-

<table>
  <tbody>
   <tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(Rank1)">Rank1</a>
     </div>
    </td>
   </tr>
  </tbody>
</table>

JQuery-

function findindex(RName) {
    var val = $('table tbody tr td div a:contains(' + RName + ')').index();
    alert(val);
});

请有人帮助我如何找到表行索引值。

谢谢

Answer 1

当您对该选择器调用 index() 时，您实际上是在获取 a 元素的索引。 text 选择器工作正常，但在找到带有 mached 文本的元素后，您需要找到它的 tr 并获取它的索引:

$('table tbody tr td div a:contains("' + RName + '")').closest("tr").index();

Demo

此外，您还有一些语法错误:

onclick="findindex(Rank1)" 

应该是:

onclick="findindex('Rank1')" 

或者更好:

onclick="findindex(this)" 

还有函数:

function findindex(element) {
    var val = $('table tbody tr td div a:contains("' + element.innerText + '")').closest("tr").index();
    alert(element.innerText + "=" + val);
};

Demo

请注意，我已将引号添加到您的 CSS 选择器中:

'table tbody tr td div a:contains("' + element.innerText + '")'
                                  ^ this                    ^ and this

要产生这个结果 'table tbody tr td div a:contains("Rank1")'

---

现在，您可以使用 jQuery 做的最好的事情:

从 anchor 元素中删除 onclick 事件属性并添加一个类:

<a herf="my link here" class="rank-anchor">Rank1</a>

然后将文档加载事件绑定(bind)到您的表:

$("table").on("click", "a.rank-anchor", function() {
    var index = $(this).closest("tr").index();
    alert(index);
});

在事件函数中，你可以看到你不需要a元素的完整选择器，你已经有了元素，所以你可以使用this找到它的 tr。在这种情况下，您也不需要通过元素的内容来查找元素，已经从它调用了事件。

Demo