使表格行 TR 成为链接

Question

我有一个用 PHP 用 echo 命令制作的表格，因为它是用来制作日历的。 我希望日历中的每一行都成为一个链接（每周选择）。 我知道我可以使用 JavaScript，但由于某种原因它在 echo 命令中时无法使用。 有没有其他方法可以做到这一点？

顺便说一句：我不希望文本变成链接，只是将行中的所有单元格变成链接。

请让我知道这是否可行或有什么替代方案。

这是我目前的代码。

<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

所以我认为不可能让单元格成为链接而不是文本，但你可以让它看起来正在发生。怎么样？

1. 添加一个标签作为包含所有其他内容的 td 的主要元素
2. 让td占据整个高度和宽度
3. 在 中添加 text-decoration: none 以使其中的文本看起来不像链接

代码：

<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

我会采用样式设置a 标签来填充整个td。

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

td {
  padding: 0;
}

示例：http://jsfiddle.net/a2w5w/

Answer 3

你可以使用jquery

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

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

更新：

如果我理解你的问题，那么下面就是你的答案

http://jsfiddle.net/Z3sjL/

Answer 4

如果您将锚定为块级元素，则可以将单元格包装在锚中。或者您可以使用事件属性、jquery 或 javascript

html事件属性

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

多一点..

<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';
});