Home > cfdb-datatable, cfdb-table, shortcode > Make links clickable in tables

Make links clickable in tables

The Situation:

You use short codes cfdb-table or cfdb-datatable to display a table on your page. One of the table column contains URLs or email addresses. You would like those to be clickable.

The Solution:

Add the following jQuery javascript to your page. To do so, in WordPress, edit your post or page, and switch the editor to “Text” view. Then past in the script AFTER the short code appears.

URLs: Assuming you have a column named “Website” use this code. Change “Website” below to the name of your column in line 3.

1
2
3
4
5
6
7
8
<script type="text/javascript">// <![CDATA[
(function ($) {
  $('td[title="Website"] div').each(
    function () {
      $(this).html('<a href="http://' + $(this).html() + '">' + $(this).html() + '</a>');
})
})(jQuery);
// ]]></script>

The above assumes you have a URL value like “www.google.com” and it add “http://” in front of it to create a valid link. If your links already have “http://” in it, simply delete that from the code above in line 5.

Emails: Assuming you have a column named “E-mail” use this code. Change “E-mail” below to the name of your column in line 3.

1
2
3
4
5
6
7
8
<script type="text/javascript">// <![CDATA[
(function ($) {
  $('td[title="E-mail"] div').each(
    function () {
      $(this).html('<a href="mailto:' + $(this).html() + '">' + $(this).html() + '</a>');
    })
})(jQuery);
// ]]></script>

New in version 2.8

Shortcodes in version 2.8+ allow you to add additional text before and after the short code. Include the above script with the short code like this (in between markers {{AFTER}} and {{/AFTER):

[cfdb-table form="myform"]
{{AFTER}}
<script type="text/javascript">// <![CDATA[
(function ($) {
  $('td[title="Website"] div').each(
    function () {
      $(this).html('<a href="http://' + $(this).html() + '">' + $(this).html() + '</a>');
})
})(jQuery);
// ]]></script>
{{/AFTER}}
[/cfdb-table]
Categories: cfdb-datatable, cfdb-table, shortcode Tags:
  1. June 2nd, 2013 at 12:05 | #1

    Thanks so much, Michael. I’ve tried it, and it works! But I wonder how to customize the code if I need to put two clickable links in my table?

    • Michael Simpson
      June 2nd, 2013 at 17:02 | #2

      I think there are a couple ways to do this:

      1. Select both Column1 and Column2):

      1
      2
      3
      4
      5
      6
      
      (function ($) {
          $('td[title="Column1"] div, td[title="Column2"] div').each(
                  function () {
                      $(this).html('<a href="http://' + $(this).html() + '" rel="nofollow">' + $(this).html() + '</a>');
                  });
      })(jQuery);

      2. Or repeat the code for code for each column:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      
      (function ($) {
          $('td[title="Column1"] div').each(
                  function () {
                      $(this).html('<a href="http://' + $(this).html() + '" rel="nofollow">' + $(this).html() + '</a>');
                  });
          $('td[title="Column2"] div').each(
                  function () {
                      $(this).html('<a href="http://' + $(this).html() + '" rel="nofollow">' + $(this).html() + '</a>');
                  });
      })(jQuery);
  2. Abdul Syukri
    June 7th, 2013 at 12:17 | #3

    @Michael Simpson

    Solved nicely. Thanks for help.

  3. kociecka
    January 10th, 2014 at 14:26 | #4

    Hi,
    would it be possible to have the word ‘Website’ in the table instead of the actual URL and have that word linked to the URL and clickable? URLs can be long and the table wouldn’t look nice.

    best regards
    Karolina

    • Michael Simpson
      January 17th, 2014 at 13:17 | #5

      Yes, looking at the code sample I provide on the page, you would change the line:

      5
      
      $(this).html('<a href="http://' + $(this).html() + '" rel="nofollow">' + $(this).html() + '</a>');

      to:

      5
      
      $(this).html('<a href="http://' + $(this).html() + '" rel="nofollow">Website</a>');

      i.e. replace the last ‘ + $(this).html() + ‘ with Website
      (but don’t put in the rel=”nofollow”…somehow this web site is forcing that into the code but it is no supposed to be in there.

  1. No trackbacks yet.
You must be logged in to post a comment.