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

Make links clickable in tables

January 25th, 2013

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.

  4. knoche9343
    October 9th, 2014 at 04:28 | #6

    Hi,
    thanks for this great plugin! I am using it to display links to pdf or Word documents on the front end. If clicking on these links, I would like the document to open in the browser; but when I click on the link, it only allows me to save the document to my comp.

    Is there a way to achieve this?

    Thanks for your guidance.
    Chris

    • Michael Simpson
      October 9th, 2014 at 07:30 | #7

      Your browser decides what to do with file.

Comments are closed.  Go To Support Forum