CODEWITHSUNDEEP
jqueryhtml
user1348226
user1348226

Reputation: 41

How to put link to the table cell using JQuery

Below there is simple/example table. For the question is on how can I put a link for the particular table cell that I need. For example, when i click on the first cell of the table "row 1, cell 1", so it will execute the link and jump to the next site.

<table border="1">
     <tr>
         <td>row 1, cell 1</td>
         <td>row 1, cell 2</td>
     </tr>
     <tr>
         <td>row 2, cell 1</td>
         <td>row 2, cell 2</td>
     </tr>
 </table>

Thanks for for SHARING.

Upvotes: 2

Views: 9843

Answers (5)

Gene Kelly
Gene Kelly

Reputation: 199

If you want the ability to override links within td's use the following code. Also use $('body') if you will be adding additional records via ajax.

<table class="table">
<tbody>
<tr data-url="/yourlink">
<td>test</td>
<td>test2</td>
<td class="custom_url">
<a href="youroverridelink">link</a>
</td>
</tr>
</tbody>
</table>


$(document).ready(function() {
   $('body').on('click','.table > tbody > tr > td', function() {
        window.location = $(this).not('.custom_url').parent().data('url');
   });
});

Upvotes: 1

Igor
Igor

Reputation: 33963

You need the a tag:

<td><a href="example.com">row 1, cell 1</a></td>

Just replace the href value with whatever site you are trying to link to.

Update for jQuery:

If you're trying to do so with jQuery, you first need to add some sort of unique identifier/selector to your desired td (such as a class, or ordinal position), and then add the anchor tag. Let's just call the td select 'yourTd' for now:

 var aTag = $('<a>', {href: 'example.com' });
 aTag.text($('.yourTd').text());// Populate the text with what's already there

 $('.yourTd').text('').append(aTag);// Remove the original text so it doesn't show twice.

Upvotes: 5

Vivek Sadh
Vivek Sadh

Reputation: 4268

Here is the JQuery way of doing it:-

$('<a>',{
    text:'row 1, cell 1',
    href:'http://www.google.com'       
}).appendTo('tr:first td:nth-child(1) ');

HTML:-

<table border="1">
 <tr>
 <td></td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

JS FIDDLE

Upvotes: 0

Heejin
Heejin

Reputation: 4571

First add class on the html td elements you want to make links on, something like:

<table border="1">
  <tr>
    <td class="link">row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td class="link">row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

Then use jQuery to make links inside td elements

$('td.link').each(function() {
    $(this).html('<a href="google.com">' + $(this).html() + '</a>')
});

Upvotes: 0

koerbcm
koerbcm

Reputation: 340

You could give your specified table cell an id (such as "linker") and then add a click event handler

jQuery:

$("td#linker").click(function(e)
{
    // Make your content bold
    $(this).css("font-weight","bold");
    // Direct the page like a link
    window.location.href="<WHER YOU WANT IT TO GO>";
    // Prevent the click from going up the chain
    e.stopPropagation();
});

HTML:

<table border="1">
    <tr>
        <td id="linker">Click Me</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Upvotes: 0

Related Questions