CFDB Plugin

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">
(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">
(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">
(function ($) {
  $('td[title="Website"] div').each(
    function () {
      $(this).html('<a href="http://' + $(this).html() + '">' + $(this).html() + '</a>');
})
})(jQuery);
</script>
{{/AFTER}}
[/cfdb-table]