Jak uczynić cały td linkiem?

Question

Jak uczynić ten cały td linkiem?

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

Kliknięcie td powinny zachowywać się tak (wiem, że to jest składniowo niepoprawne:

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

EDIT: jak dotąd wszystkie sugestie są tylko co rozpiętość wewnątrz td link, pomóc lol .

Answer 1

użycie CSS.

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

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

CSS zmusza łącze do rozwinięcia do pełnej szerokości i wysokości TD.

Answer 2

zdarzenie OnClick dla TD:

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

Answer 3

nie można zawinąć w sposób td n kotwica. Wykonaj:

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

Albo

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

Answer 4

Dodaj znacznik zakotwiczenia wewnątrz td i ustawić jego atrybut wyświetlacza do bloku. To powinno umożliwić kliknięcie całego td.

#blue-border a{ 
    display: block; 
} 

lub

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

Answer 5

Jeśli wszystko robisz jest wypalanie JavaScript, polecam korzystania onclick zamiast znacznika zakotwiczenia w pierwszej kolejności, jak:

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

Można rzucać prosty styl css tam jeśli chcą myszy, aby stać się wskazówka:

#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> 

plik css:

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

    .blueCss td { 
     background-color: blue; 
    } 

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

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

kod jQuery:

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

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

Sprawdź tutaj: jsFiddle.net

Answer 7

użyć jQuery z klasą
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });