Web Analytics Made Easy - StatCounter How to link the entire tablecell (td) when there is a link inside it? - CodingForum

Announcement

Collapse
No announcement yet.

How to link the entire tablecell (td) when there is a link inside it?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    How to link the entire tablecell (td) when there is a link inside it?

    Hello, I wonder if it is possible to add a function to a tablecell, which makes a hyperlink out of the entire tablecell if there is a link in the cell?

    So that, if I write...
    <td height="100"><a href="link.asp">a link</a></td>
    ...the empty spaces surrounding the link would be linked as well?

    Please let me know if I have to explain further! Thanks/P
    Last edited by pvz; Feb 16, 2004, 06:52 AM.
    Tags: None
  • #2
    why not just say ...

    <td onclick="location.href='url.html'">content</td>
    *keep it simple (TM)

    Comment

    • #3
      Thanks. I would however like any mouseover functions (in the link) to be activated as well (guess I should've told you from the start, sorry).

      So could I just move the onmouseover-effect from the <a>-tag to the <td>-tag, would that really work crossbrowser?

      Comment

      • #4
        This don't work in Firefox.
        Code:
         
<html>
</html>
<head>
<script>
function test()
{
  var table=document.getElementById('test');
  Row=table.firstChild.firstChild;
  while(Row!=null)
  {
    Col=Row.firstChild;
    while(Col!=null)
    {
      InnerEl=Col.firstChild
      if(InnerEl.tagName=='A')
      {
        Col.style.width=Col.offsetWidth+'px';  
	width=InnerEl.style.borderWidth;
	width=width.split('px');
	InnerEl.style.width=Col.offsetWidth-width[0]*2+'px';  
     }
     Col=Col.nextSibling
   }
   Row=Row.nextSibling;
  }
}
</script>
</head>
<body onload="test();">
<table width=500 border=1 id="test">
<tr>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
</tr>
<tr>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;" >Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
</tr>
</table>

</body>
</html>

        Comment

        • #5
          you could always put a button inside the cell. set it's properties to the maximum cell size and have all the events fired from the button.

          just experiment and see.
          *keep it simple (TM)

          Comment

          • #6
            brilliant idea
            still
            Code:
            function test()
{
  var table=document.getElementById('test');
  Row=table.firstChild.firstChild;
  while(Row!=null)
  {
     Col=Row.firstChild;
     while(Col!=null)
     {
        InnerEl=Col.firstChild
        if(InnerEl.tagName=='A')
        {
           InnerEl.style.width='100%';  
        }
        Col=Col.nextSibling
     }
     Row=Row.nextSibling;
  }
}
            note if you wanna avoid using a script you could as jbot said just put style="width:100%" in your links

            Comment

            • #7
              garadon< Thanks, great example, works perfect except it requires ALL tablecells to have a link inside them... How could I get past that problem?

              Comment

              • #8
                It don't require a link in the cell, if no link nothing happens.

                Comment

                • #9
                  when I removed a link in your example i got an error onLoad, try this:

                  <html>
                  </html>
                  <head>
                  <script>
                  function test()
                  {
                  var table=document.getElementById('test');
                  Row=table.firstChild.firstChild;
                  while(Row!=null)
                  {
                  Col=Row.firstChild;
                  while(Col!=null)
                  {
                  InnerEl=Col.firstChild
                  if(InnerEl.tagName=='A')
                  {
                  Col.style.width=Col.offsetWidth+'px';
                  width=InnerEl.style.borderWidth;
                  width=width.split('px');
                  InnerEl.style.width=Col.offsetWidth-width[0]*2+'px';
                  }
                  Col=Col.nextSibling
                  }
                  Row=Row.nextSibling;
                  }
                  }
                  </script>
                  </head>
                  <body onload="test();">
                  <table width=500 border=1 id="test">
                  <tr>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  </tr>
                  <tr>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;">Link</a></td>
                  <td><a href="link.html" style="border:1px black solid;" >Link</a></td>
                  <td></td>
                  </tr>
                  </table>

                  </body>
                  </html>

                  Comment

                  • #10
                    Anyone..?
                    The code works but gives me an error when there are empty tablecells as in the last example (the very last <td> is empty in that example)! /P

                    Comment

                    • #11
                      like this but why don't u just put style="width:100%" in the tags
                      Code:
                      <html>
</html>
<head>
<script>
function test()
{
var table=document.getElementById('test');
Row=table.firstChild.firstChild;
while(Row!=null)
{
Col=Row.firstChild;
while(Col!=null)
{
InnerEl=Col.firstChild
if(InnerEl==null)
{
Col=Col.nextSibling
continue;
}
if(InnerEl.tagName=='A')
{
  InnerEl.style.width='100%'; 
}
Col=Col.nextSibling
}
Row=Row.nextSibling;
}
}
</script>
</head>
<body onload="test();">
<table width=500 border=1 id="test">
<tr>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
</tr>
<tr>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;">Link</a></td>
<td><a href="link.html" style="border:1px black solid;" >Link</a></td>
<td></td>
</tr>
</table>

</body>
</html>

                      Comment

                      • #12
                        There's no need for Javascript.
                        Code:
                        td a { display: block; height: 100%; width: 100% }
                        David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
                        W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

                        Comment

                        • #13
                          Ok thanks me' but in which browsers will that work?
                          Last edited by pvz; Feb 17, 2004, 05:51 PM.

                          Comment

                          Previous template Next
                          Working...
                          X