Javascript 如何将事件添加到超链接单击并获取单击对象的行索引？

我有一个Sharepoint 2013列表什么是html表。有一列带有超链接。如果用户单击此列中的任何超链接并获取所单击超链接的rowindex，我想触发一个事件。所有的东西都是由SP自动生成的，所以看起来很混乱，链接上看起来没有id。超链接表的html的一部分：（我希望这足以以某种方式确定行索引）

我的最终目标是从单击的行中读取所有其他项目，并将它们带到重定向到超链接的页面。遗憾的是，我没有JS的经验，已经因为失败浪费了几个小时，所以请帮我一把！非常感谢你的帮助

当正确使用第一个答案中的建议代码时：

2号之后还在哪里工作。页面已加载：

---

此.id

将为您提供单击的

的id，您可以使用

on（）

将事件添加到动态添加的元素中，如下所示

$(document).ready(function(){
    $("table tr").on('click',function (){
        alert(this.id);
    });
});

要在单击链接而不是其他元素时获取

的

id

，以下代码将起作用

$(document).ready(function() {  
  $("table tr a").on('click',function (){
    alert($(this).parents('tr:last').attr('id'));
  });
});

---

注意：我使用了

tr:last

，因为您在

td

中有

table

，所以可能也会得到其他tr。

他们使用此代码从表中获取行的索引

$(document).ready(function(){
$("table tr").click(function (){

    alert($(this).index());
});

}))

---

您还可以使用表id代替fire event的表标记。问题在于事件侦听器不是动态的。此外，由于您希望索引是增量的，即使在更改页面时，代码也会稍微复杂一些

您需要跟踪所处的页面以及每页的行总数。我还向我认为不会改变的元素添加了一些缓存

（更改页面是指单击“下一步”按钮时）

以下是jQuery的工作原理：

$('table').on('click', 'a', function (e) {

  // Make sure the browser doesn't follow the link
  e.preventDefault();
  console.log($(this).parent().parent().index());
});

即使向表体添加新行，单击链接仍会显示行索引

以下是如何在本机JS中执行此操作：

// Attach an event listener to the table element
let table = document.querySelector('table');
table.addEventListener('click', checkRowOfAnchor, false);

function checkRowOfAnchor(e) {

  // check to see if the clicked element is a link
  // prevent the browser from following the link
  // log the row index to the console
  if (e.target.tagName === 'A') {
    e.preventDefault();
    console.log(e.target.parentNode.parentNode.rowIndex);
  }
}

---

是否仅在该列中存在链接，还是在其他列中也存在链接？有多个列，但只有一列具有超链接。单击事件未触发的原因是

$（“tr”）

不是动态的，因此，当表替换所有

时，新元素没有侦听器。另外，索引将再次从0开始，这就是您要寻找的吗？或者指数应该从30开始？我明白了。是的，指数应该从2的30开始。页面。@Nefri:我已为外部单击更新了ans。请检查它是否有效。事件侦听器不是动态的，因此当表更改时，这将不起作用。是否有办法使其成为动态的？我的目标是从单击的行中读取所有其他项目，并将它们带到重定向到超链接的页面。我已更新了答案，以获得动态添加的tratch，将事件侦听器添加到表中。您将捕获所有动态添加的行，然后使用事件传播。正如@Andy所建议的，更新为列出到

表tr

是的，我正在使用jquery。我试着理解和测试。非常感谢您的详细评论。是的，我现在很少使用jQuery，所以我先用原生JS编写，然后再传输：）这一个即使在2。页我不知道它为什么会起作用，但我会从这一点上弄明白的，非常感谢你！：DBasically，因为事件侦听器位于table元素上。它将等待事件从锚点之类的子元素中冒出。因此，代码检查单击的元素是否为锚定元素，防止链接被跟踪，然后记录行索引。例如，如果我想从同一行获取ID，我是否应该将“.index（）”更改为“.attr（'ID'）”？

$(document).ready(function () {
    var $table = $('table'); // cache the table
    var $rows = null; // cache rows - we do this on the function below
    var totalRowsNum = 30; // this needs to stay the same even if the last page has less rows
    var currentPageNum = -1; // the page we are currently viewing

    // start at page 0
    onPageChange(0);

    // call this after you change page
    function onPageChange(newPageNum) {
        $rows = $table.find('tbody tr');
        currentPageNum = newPageNum;
    }

    $table.on('click', 'tbody tr a', function () {
        var index = (currentPageNum * totalRowsNum) + $rows.index(this);
    });
});

$('table').on('click', 'a', function (e) {

  // Make sure the browser doesn't follow the link
  e.preventDefault();
  console.log($(this).parent().parent().index());
});

// Attach an event listener to the table element
let table = document.querySelector('table');
table.addEventListener('click', checkRowOfAnchor, false);

function checkRowOfAnchor(e) {

  // check to see if the clicked element is a link
  // prevent the browser from following the link
  // log the row index to the console
  if (e.target.tagName === 'A') {
    e.preventDefault();
    console.log(e.target.parentNode.parentNode.rowIndex);
  }
}