adding a href tag to a table cell with javascript

i have this fiddle:

https://jsfiddle.net/tkwpztkf/

Is there a way to use either JavaScript or jQuery

So that on page load my page renders this:

        <table id="table1">
            <tr>
                <td>
                    <span><a href="http://www.google.com" target="_blank">Google<a></span>
                </td>
                <td>
                    <span><a href="http://www.yahoo.com" target="_blank">Yahoo<a></span>
                </td>
                <td>
                    <span><a href="http://www.bing.com" target="_blank">Bing<a></span>
                </td>
            </tr>
        </table>

Open in new window


Basically I want to add the hyperlink a href tag to my items inside the cells on the jquery page load event.
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
What criteria would you use on the <span> to figure out what href to add?

Here is some sample code that does what you want but using hard coded rules
HTML
    <table id="table1">
      <tr>
        <td>
          <span>Google</span>
        </td>
        <td>
          <span>Yahoo</span>
        </td>
        <td>
          <span>Bing</span>
        </td>
      </tr>
    </table>

Open in new window

JQuery
$(function() {
  $('#table1 td span').each(function() {
    var text = $(this).text();
    $(this).html(
      $('<a/>')
        .html(text)
        .attr('href','http://www.' + text + '.com')
      );
  });
});

Open in new window

0
 
AnthonyD3Connect With a Mentor Commented:
I would do it this way:

<table>
  <tbody>
    <tr>
      <td data-href="https://www.w3.org/">W3C</td>
      <td>No Link</td>
    </tr>
  </tbody>
</table>

Open in new window


(function($) {
  $(document).ready(function() {
    // Loop through all table cells
    $('td').each(function(i) {
      // Attempt to store the href in a variable
      var redirect = $(this).attr('data-href');
      // If the attribute exists...
      if (typeof redirect !== typeof undefined && redirect !== false) {
        // Bind the click event to this cell
        $(this).click(function() {
          // Redirect when the user clicks
          window.location = redirect;
        });
      }
    });
  });
})(jQuery);

Open in new window

0
 
maqskywalkerAuthor Commented:
Thanks guys. very cool.
0
All Courses

From novice to tech pro — start learning today.