¿Cómo hacer que un td entero sea un enlace?

Question

¿Cómo puedo hacer que todo este td sea un enlace?

<td id="blue-border"><span id="blue"></span></td> 

Al hacer clic td debe hacer que se comporte así (sé que esto es sintácticamente incorrecto:

<a href="javascript:chooseStyle('blue-theme', 360)"> <td id="blue-border"><span id="blue"></span></td> </a> 

EDIT: hasta ahora todas las sugerencias solamente están haciendo el lapso dentro del td un enlace, ayudan lol .

Answer 1

uso de CSS.

<style type="text/css"> 
td a { display: block; width: 100%; height: 100%; } 
</style> 

<td><a href="#">Link</a></td> 

El CSS obliga al enlace a expandirse a todo el ancho y alto del TD.

Answer 2

Definir un evento OnClick para el TD:

<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">... 

Answer 3

no se puede envolver un TD en una n ancla. Haga lo siguiente:

<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td> 

O

<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td> 

Answer 4

Añadir una etiqueta de anclaje en el interior del TD y establezca su atributo de visualización para bloquear. Esto debería hacer que toda la td se pueda hacer clic.

#blue-border a{ 
    display: block; 
} 

o

<a href="link" style="display:block;"> 

Answer 5

Si todo lo que está haciendo es disparar el javascript, me gustaría sugerir el uso de onclick en lugar de una etiqueta de ancla en el primer lugar, como:

<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td> 

Usted puede lanzar un estilo css simple en allí si desee el ratón para convertirse en un puntero:

#cell123:hover { cursor: pointer; } 

Answer 6

<table width="100%" class="blueCss"> 
    <tr> 
     <td ID="tdBlue"> 
      <span id="Blue">Hello</span> 
     </td> 
     <td> 
      <span>other col</span> 
     </td> 
    </tr> 
</table> 

archivo css:

.blueCss { 
     height: 100px; 
     width: 100px; 
    } 

    .blueCss td { 
     background-color: blue; 
    } 

    .blueCss:hover { 
     border-color: #00ae00; 
    } 

    .blueCss td:hover { 
     background-color: yellow; 
     cursor: pointer; 
    } 

código jQuery:

$(document).ready(function(){ 
    var tdLink = $('#tdBlue'); 

    tdLink.click(function(){ 
         alert('blue-theme'); 
    }); 
}); 

Marque aquí: jsFiddle.net

Answer 7

usar jQuery con la clase
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });