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
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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, 05:52 AM.

  • #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, 04:51 PM.

                          Comment

                          Working...
                          X