使表行TR成为链接

Question

I have a table made in PHP with the echo command because it's to make a calendar. I want each row in the calendar to become a link (to select each week). I know I can use JavaScript but it wont work when it's in an echo command for some reason. Is there another way to do this?

BTW: I don't want the text to become links just all the cells in the row to become links.

PLEASE let me know if this is possible or what the alternatives are.

here is my code I have so far.

<style style="text/css">
    .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #b8d1f3;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
h3 {
    color: #FFF;
}
</style>

.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="8" align="center" bgcolor="#666666"><h3>January</h3></td>
      </tr>
      <tr>
        <td width="30" align="center" bgcolor="#0099FF">W</td>
        <td width="30" align="center" bgcolor="#0099FF">S</td>
        <td width="30" align="center" bgcolor="#0099FF">M</td>
        <td width="30" align="center" bgcolor="#0099FF">T</td>
        <td width="30" align="center" bgcolor="#0099FF">W</td>
        <td width="30" align="center" bgcolor="#0099FF">T</td>
        <td width="30" align="center" bgcolor="#0099FF">F</td>
        <td width="30" align="center" bgcolor="#0099FF">S</td>
      </tr>

      <?php 
                    $timestamp = mktime(0,0,0,1,1,$year);
                    $maxday = date("t",$timestamp);
                    $thismonth = getdate ($timestamp);
                    $startday = $thismonth['wday'];
                    $week =  date("W", $timestamp);

            echo "<table class='hoverTable'>";
            for ($i=0; $i<($maxday+$startday); $i++) {

                $date  = mktime(0, 0, 0, 1, $i - $startday + 1, $year);

                            //want to make this row below a link

                if(($i % 7) == 0 ) echo "<tr><td width='30'>" . date('W', $date) . "</a></td>";

                if($i < $startday) echo "<td></td>";
                 else echo "<td align='center' valign='middle' height='20px' width='30px'>". ($i - $startday + 1) . "</td>";

                if(($i % 7) == 6 ) echo "</tr>";
}
            echo "</table>";

?>

Answer 1

So I don't think it's possible to make the cell a link but not the text, but you can make it look like that is happening. How?

1. Add an tag as the main element of the td in which all other content is contained
2. Make the take up the entire height and width of the td
3. Add text-decoration: none to the so the text within won't seem like links

Code:

<td>
    <a  href="http://www.joshuakissoon.com" title="Joshua Kissoon." style="line-height: 100%; text-decoration: none; width:100%; height:100%">Checkout Joshua Kissoon.</a>
</td>

JSFiddle: http://jsfiddle.net/KrRzP/5/

Answer 2

I would take the approach of styling the a tag to fill the entire td .

a {
  display: block;
  height: 100%;
  width: 100%;
}

td {
  padding: 0;
}

Example: http://jsfiddle.net/a2w5w/

Answer 3

You can use jquery

$(document).ready(function(){
    $(".calander tr").click(function() {
        $(".calander tr").removeClass("redColor");
        $(this).addClass("redColor");
    });
});

JSFiddle : http://jsfiddle.net/M94HE/

Update:

If I understood your question following is your answer

http://jsfiddle.net/Z3sjL/

Answer 4

You can just wrap your cell in an anchor if you make the anchor a block level element. Or you can use event attributes, jquery, or javascript

html event attributes

<table>
    <tr>
        <td onclick="window.location = 'index.html';">Click me!</td>
    </tr>
</table>

a little more..

<table>
    <tr>
        <td style="cursor:pointer" 
            onMouseover="window.status='http://www.stackoverflow.com/'" 
            onMouseout="window.status=''" 
            onMouseup="window.location='http://www.stackoverflow.com/'">
                Click me!
        </td>
    </tr>
</table>

jquery

$("tr").click(function(){
});

javascript

$('tr').bind('click', function(){
    window.location = 'http://stackoverflow.com';
});