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做的最好的事情：

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

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

然后将文档加载上的事件绑定到您的表：

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

在事件功能中，您可以看到您不需要a元素的完整选择器，您已经拥有该元素，因此您可以使用this查找其{{1} }}。在这种情况下，你不需要通过它的内容找到元素，事件正在从它调用它。

Demo

Answer 2

HTML：

<table>
  <tbody>
   <tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank1</a>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank2</a>
     </div>
    </td>
   </tr><tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank3</a>
     </div>
    </td>
   </tr><tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank4</a>
     </div>
    </td>
   </tr><tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank5</a>
     </div>
    </td>
   </tr><tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank6</a>
     </div>
    </td>
   </tr><tr>
    <td>
     <div>
       <a herf="my link here" onclick="findindex(this)">Rank6</a>
     </div>
    </td>
   </tr>
  </tbody>
</table>

JavaScript功能：

function findindex(obj) {
    var val = $(obj).closest("tr").index();
    alert("Rank = " + val);
};

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

2 个答案: