CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlink
Nefri
Nefri

Reputation: 197

How to add event to a hyperlink click and get the rowindex of the clicked object?

I have a Sharepoint 2013 list what is a html table. There is a column with hyperlinks. I would like to fire an event if the user click on any of the hyperlinks in this column and get the rowindex of the clicked hyperlink. Everything is auto generated by SP so it is a mess and looks like no id at the links. A part of the html of the hyperlink's table: (I hope this is enough to determinate the rowindex somehow)

<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 :(

Additionaly one more problem is that the table shows only 30 element by default and there is a next button at the bottom of the page what if pressed the table shows the next 30 element. So the click event should fire even after the button is pressed. I could get the rowindex by clicking on any element of the tabe, but this somehow worked only on the first 30 items:

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

My final goal is to read all other items from the clicked row and bring them to the page where to the hyperlink is redirect. Sadly I have no experience with JS and already wasted several hours for fails, so pls lend me a hand! Thank you very much for your kind help!

When works correctly with the suggested code from the first answer:

enter image description here

Where still work after the 2. page is loaded:

enter image description here

Upvotes: 0

Views: 1051

Answers (4)

Ricardo Ribeiro
Ricardo Ribeiro

Reputation: 547

The problem is that the event listener is not dynamic. Also, because you want the index to be incremental, even when changing pages, the code is a little more complex.

You need to keep track of what page you are in, and the total number of rows per page. I also added some caching to elements that I think are not going to change.

(By changing page I mean when you click the next button)

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

Upvotes: 1

Andy
Andy

Reputation: 63550

Here's how event delegation/propagation works in jQuery:

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

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

Even if you add new rows to the table body, clicking on the link will still reveal the row index.

DEMO

Here's how you do this in native 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

Upvotes: 1

Makarand Patil
Makarand Patil

Reputation: 1001

this.id will give you the id of clicked <tr> and you can use on() to add event to dynamically added elements as shown below

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

for getting the id of the <tr> on link click and not other elements, yhe following code will work.

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

Note i have used tr:last as you are having table inside td so might get other tr as well.

Upvotes: 0

Rahul Sahu
Rahul Sahu

Reputation: 235

hey use this code to get index of row from table

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

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

});

You can also use the table id in place of table tag for fire event

Upvotes: -1

Related Questions