将表格行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>";

?>

- Pieter de Vries

---

你想要将 <tr> 转换为链接。 - Karthick Kumar

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/

- Joshua Kissoon

Answer 2

我会采用将标签样式设置为填充整个的方法。

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

td {
  padding: 0;
}

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

- SamT

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/

- MD SHAHIDUL ISLAM

---

这是在单击时更改颜色，但这并不完全是我要找的。 - Pieter de Vries

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(){
});

{{链接1: JavaScript}}

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

- davidcondrey

---

这很好，但我该如何在PHP中使用它？ - Pieter de Vries