如何將事件添加到超鏈接單擊並獲取被單擊對象的rowindex？

Question

我有一個SharePoint 2013列表，什么是html表。 有一個帶有超鏈接的列。 如果用戶單擊此列中的任何超鏈接並獲取單擊的超鏈接的rowindex，我想觸發一個事件。 一切都是由SP自動生成的，因此很混亂，看起來鏈接上沒有id。 超鏈接表的html的一部分：（我希望這足以以某種方式確定rowindex）

<td id="scriptWPQ2">
 <table onmousedown="return OnTableMouseDown(event);" summary="TestList" xmlns:o="urn:schemas-microsoft-com:office:office" o:webquerysourcehref="&amp;XMLDATA=1&amp;RowLimit=0&amp;View=%7BEA3CDF07%2D1A28%2D4A44%2DBCB2%2D01F7D45A76C0%7D" border="0" cellspacing="0" dir="none" onmouseover="EnsureSelectionHandler(event,this,14)" cellpadding="1" id="{7632DCD3-4F1B-4F8E-AC8C-FB9C4372CD3D}-{EA3CDF07-1A28-4A44-BCB2-01F7D45A76C0}" class="ms-listviewtable" handledeleteinit="true">
  <tbody>
   <tr class=" ms-itmHoverEnabled ms-itmhover" oncontextmenu="return ShowCallOutOrECBWrapper(this, event, false)" iid="14,312,0" id="14,312,0" setedgeborder="true">
    <td class="ms-cellstyle ms-vb2">
     <a href="/sites/Registry">copy</a> //no id here :(

另外一個問題是，默認情況下，表格僅顯示30個元素，頁面底部有一個下一個按鈕，如果按下該按鈕，則顯示下一個30個元素。 因此，即使在按下按鈕后，也應該觸發click事件。 我可以通過單擊tabe的任何元素來獲取rowindex，但這只能在前30個項目上起作用：

$(document).ready(function()
{
$("tr").click(function (){
        alert($("tr").index(this));
    });
});

我的最終目標是從單擊的行中讀取所有其他項目，並將它們帶到重定向超鏈接的頁面。 遺憾的是，我沒有JS方面的經驗，並且已經因為失敗而浪費了幾個小時，所以請幫我忙！ 非常感謝您的幫助！

當第一個答案中的建議代碼正確運行時：

2.頁面加載后仍然可以工作的地方：

Answer 1

問題在於事件偵聽器不是動態的。 另外，由於您希望索引是遞增的，即使更改頁面也是如此，所以代碼要復雜一些。

您需要跟蹤您所在的頁面以及每頁的總行數。 我還為我認為不會改變的元素添加了一些緩存。

（通過更改頁面，我的意思是當您單擊下一步按鈕時 ）

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

Answer 2

這是事件委托/傳播在jQuery中的工作方式：

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

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

即使將新行添加到表主體，單擊鏈接仍會顯示行索引。

DEMO

這是在本地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);
  }
}

DEMO

Answer 3

this.id將為您提供單擊<tr>的ID，您可以使用on()將事件添加到動態添加的元素中，如下所示

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

為了獲得點擊鏈接時<tr>的id ，而不是其他元素，以下代碼將起作用。

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

注意我使用了tr:last因為您在td中有table ，因此也可能會得到其他tr。

Answer 4

嘿，使用此代碼從表中獲取行的索引

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

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

}）;

您也可以使用表格ID代替表格標記來引發火災