Question 196081 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to make text in a table data cell a clickable link to a callback function?

I am trying to make the text in a td element be a clickable link which calls a callback function which will then open a read-only details window. I want the text to look like a link so the user knows to click it. The way it was before is you could click the whole table row, but there is no indication that it is even clickable. Also, I want only the text of a specific column to be clickable.

This is the anchor I’m adding to the target cell, which is taking place inside the init function for the object:

$(td).html('<a href="#" onclick="object.myFunction.call(this)">' + cellData + '</a>');

Then this is the callback function taking place outside the init:

grid.readOnlyModalCallback = function () {
    let guid = $(this).data("guid");
    if (guid) {
        grid.showDetailModal(guid);
    }
    return false;
};

This makes the text a link like I want, but it does nothing when clicked except redirect the page to "#".
I know the function works because it will call if I make the whole row clickable, like I mentioned.

Can anybody determine what I’m doing wrong?

Tags:

2

Answers


  1. 0

    It seems like you are trying to bind the click event on the link to object.myFunction but what you actually want is to bind it to grid.readOnlyModalCallback.

    1. Use jQuery.data() to store the guid with the link:

      let guid = 'yourGuidValueHere'; // retrieve your guid value accordingly
$(td).html('<a href="#" class="link-class">' + cellData + '</a>').find('a').data('guid', guide);

    2. Then bind the click event to the links using jQuery.on() in your init function:

      $('.link-class').on('click', grid.readOnlyModalCallback);

    3. Make sure you’re preventing the default event in your callback:

      grid.readOnlyModalCallback = function (event) {
 event.preventDefault();
 let guid = $(this).data("guid");
 if (guid) {
     grid.showDetailModal(guid);
 }
 return false;
};
    Login or Signup to reply.
  2. 0

    Simply add a click event handler to the td and style the td to make it clear that it can be clicked.

    See example below:

    document.querySelectorAll(".clickable").forEach(function(el){
  el.addEventListener("click", function(){
    console.log("You clicked me.");
  });
});
    table, tr, td {
  border:1px solid grey;
}

.clickable {
  cursor:pointer;
  color:#00f;
}

.clickable:hover {
  color:#f00;
}
    <table>
  <tr>
    <td>Row 1 - Column 1</td>
    <td>Row 1 - Column 2</td>
    <td>Row 1 - Column 3</td>    
  </tr>
    <tr>
    <td>Row 2 - Column 1</td>
    <td class="clickable">Row 2 - Column 2</td>
    <td>Row 2 - Column 3</td>    
  </tr>
    <tr>
    <td class="clickable">Row 3 - Column 1</td>
    <td>Row 3 - Column 2</td>
    <td>Row 3 - Column 3</td>    
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search