Solved

setting a hyperlink on a html table's cell value

Posted on 2014-11-06
2
223 Views
Last Modified: 2014-11-07
I have a html table that looks like this:

http://jsfiddle.net/hmt7nk1d/

Is there a way, either with CSS or with javascript to set a hyperlink for the values contained in the TeamWebsite column.

So If I click on any row in the TeamWebsite column I will be taken to that url.
So for example if I click on the falcons url it will take me to that url?
0
Comment
Question by:maqskywalker
2 Comments
 
LVL 24

Expert Comment

by:chaau
Comment Utility
The hyperlinks are created using an <a> tag, like this:
<a href="http://www.azcardinals.com">click me</a>
<a href="http://www.azcardinals.com">http://www.azcardinals.com</a>
Check it out
BTW, I think you do not need the "Team WebSite" column altogether. Just use the TeamName column, like this
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Use :
var rows = document.getElementById("table1").getElementsByTagName("tr");
    for(var i=1;i<rows.length;i++) {
        rows[i].getElementsByTagName("td")[4].onclick = function() {
            var src = this.innerHTML;
            location.href = src;
        }
    }

Open in new window


or this if you've jQuery :
jQuery(function($) {
    $("tr:gt(0) td:eq(4)", "#table1").click(function() {
        location.href = $(this).text();
    });
});

Open in new window

0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now