{"id":867,"date":"2013-01-25T08:53:34","date_gmt":"2013-01-25T13:53:34","guid":{"rendered":"http:\/\/cfdbplugin.com\/?p=867"},"modified":"2015-07-23T13:40:40","modified_gmt":"2015-07-23T17:40:40","slug":"make-links-clickable-in-tables","status":"publish","type":"post","link":"https:\/\/cfdbplugin.com\/?p=867","title":{"rendered":"Make links clickable in tables"},"content":{"rendered":"<p><strong>The Situation<\/strong>:<\/p>\n<p>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.<\/p>\n<p><strong>The Solution<\/strong>:<\/p>\n<p>Add the following jQuery javascript to your page. To do so, in WordPress, edit your post or page, and switch the editor to &#8220;Text&#8221; view. Then past in the script AFTER the short code appears.<\/p>\n<p><strong>URLs<\/strong>:\u00a0Assuming you have a column named &#8220;Website&#8221; use this code. Change &#8220;Website&#8221; below to the name of your column in line 3.<\/p>\n<pre lang=\"javascript\" line=\"1\" escaped=\"true\">&lt;script type=\"text\/javascript\"&gt;\r\n(function ($) {\r\n  $('td[title=\"Website\"] div').each(\r\n    function () {\r\n      $(this).html('&lt;a href=\"http:\/\/' + $(this).html() + '\"&gt;' + $(this).html() + '&lt;\/a&gt;');\r\n    })\r\n})(jQuery);\r\n&lt;\/script&gt;<\/pre>\n<p>The above assumes you have a URL value like &#8220;www.google.com&#8221; and it add &#8220;http:\/\/&#8221; in front of it to create a valid link. If your links already have &#8220;http:\/\/&#8221; in it, simply delete that from the code above in line 5.<\/p>\n<p><strong>Emails<\/strong>: Assuming you have a column named &#8220;E-mail&#8221; use this code. Change &#8220;E-mail&#8221; below to the name of your column in line 3.<\/p>\n<pre lang=\"javascript\" line=\"1\" escaped=\"true\">&lt;script type=\"text\/javascript\"&gt;\r\n(function ($) {\r\n  $('td[title=\"E-mail\"] div').each(\r\n    function () {\r\n      $(this).html('&lt;a href=\"mailto:' + $(this).html() + '\"&gt;' + $(this).html() + '&lt;\/a&gt;');\r\n    })\r\n})(jQuery);\r\n&lt;\/script&gt;<\/pre>\n<p><strong>New in version 2.8<\/strong><\/p>\n<p>Shortcodes in version 2.8+ allow you to add additional text\u00a0before and after the short code. Include the above script with the short code like this (in between markers {{AFTER}} and {{\/AFTER):<\/p>\n<pre>[cfdb-table form=\"myform\"]\r\n{{AFTER}}\r\n&lt;script type=\"text\/javascript\"&gt;\r\n(function ($) {\r\n  $('td[title=\"Website\"] div').each(\r\n    function () {\r\n      $(this).html('&lt;a href=\"http:\/\/' + $(this).html() + '\"&gt;' + $(this).html() + '&lt;\/a&gt;');\r\n})\r\n})(jQuery);\r\n&lt;\/script&gt;\r\n{{\/AFTER}}\r\n[\/cfdb-table]\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6,5,3],"tags":[],"class_list":["post-867","post","type-post","status-publish","format-standard","hentry","category-cfdb-datatable","category-cfdb-table","category-shortcode"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1mptf-dZ","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/posts\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=867"}],"version-history":[{"count":12,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":1174,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=\/wp\/v2\/posts\/867\/revisions\/1174"}],"wp:attachment":[{"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cfdbplugin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}