Question

我有一个使用echo命令在PHP中创建的表，因为它是用来创建日历的。我希望日历中的每一行都成为一个链接（每周选择一次）。我知道我可以使用JavaScript，但由于某些原因它在echo命令中时它不会工作。还有另一种方法吗？

BTW：我不希望文本成为链接中的所有单元格成为链接。

请告诉我这是否可能或替代方案是什么。

这是我到目前为止的代码。

<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

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

添加标记作为包含所有其他内容的td的主要元素
占据td的整个高度和宽度
添加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';
});

使表行TR成为链接

4 个答案: