Solved

adding a href tag to a table cell with javascript

Posted on 2016-08-29
3
67 Views
Last Modified: 2016-08-30
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.
0
Comment
Question by:maqskywalker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41775443
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
 
LVL 1

Assisted Solution

by:AnthonyD3
AnthonyD3 earned 250 total points
ID: 41775601
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
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41776856
Thanks guys. very cool.
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question