如何使可点击 <td>

Question

我知道已经有很多关于此的帖子，但我就是无法让它发挥作用。我想要做的就是让一个完整的 <td> 可以点击。我有一个生成此 table 的 PHP 循环，下面是其中的一个简单部分。

<table id="reservation_table" style="border-collapse: collapse; border: 1px solid; padding: 5px;">      
  <tr>
    <th style="border: 1px solid; padding: 5px;"></th>
    <th style="border: 1px solid; padding: 5px;">Dec. 18</th>
    <th style="border: 1px solid; padding: 5px;">Dec. 20</th>
    <th style="border: 1px solid; padding: 5px;">Dec. 21</th>
  </tr>
  <tr>
    <td style="border: 1px solid; padding: 5px;" class="clickable">1:00-1:15</td>
    <td id="1" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td>
    <td id="2" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td>
    <td id="3" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td>
  </tr>
  <tr>
    <td style="border: 1px solid; padding: 5px;">4:00-4:15</td>
    <td id="28" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td>
    <td id="29" style="border: 1px solid; padding: 5px;" class="clickable"><a href="http://somewhere.com">Reserve slot</a></td>
    <td id="30" style="border: 1px solid; padding: 5px;"><a href="http://somewhere.com">Reserve slot</a></td>
  </tr>
</table>

我真正需要的是 CSS 让 class "clickable" 实际上可以点击。现在是....

.clickable{
  display: table-cell;
  height: 100%;
}

将显示更改为阻止不仅会弄乱格式，而且实际上也不会使单元格可点击。它会将光标更改为悬停时的指针手，但实际点击进入网站不起作用。

Answer 1

你应该确保 clickable 里面的 <a> 填满整个 td

.clickable a {
  width: 100%;
  margin: 0;
}

Answer 2

如果你想要完整的 td 元素像 link 一样，你应该这样做 this.It 将使用一些简单的 javascript.Here 作为例子使你的整个 td 可点击单击时它将 td 背景颜色更改为红色

   var input=document.getElementsByTagName('td');
   for(i=0;i<input.length;i++){
       (function (i){
         input[i].addEventListener('click',function(e){
      e.target.style.background='red';
   });
    })(i)
   }

<table id="reservation_table" style="border-collapse: collapse; border: 1px solid; padding: 5px;">      

  <tr>
     <td style="border: 1px solid; padding: 5px;" ><a href='http://somewhere.com'>1:00-1:15</a></td>
   </tr>
</table>

Answer 3

你不应该使用 table 标签而是使用 css ，这是你问题的答案

HTML

<div class="table" id="reservation_table">      
  <div class="row">
    <p></p>
    <p>Dec. 18</p>
    <p>Dec. 20</p>
    <p>Dec. 21</p>
  </div>
  <div class="row">
    <p>1:00-1:15</p>
    <a href="http://somewhere.com">Reserve slot</a>
    <a href="http://somewhere.com">Reserve slot</a>
    <a href="http://somewhere.com">Reserve slot</a>
  </div>
  <div class="row">
    <p>4:00-4:15</p>
    <a href="http://somewhere.com">Reserve slot</a>
    <a href="http://somewhere.com">Reserve slot</a>
    <a href="http://somewhere.com">Reserve slot</a>
  </div>
</div>

CSS

.table {
    display: table;
    border: 1px solid; 
    padding: 5px;
}

.row {
    display: table-row;
}

a,p {
    background: yellow; // for demonstration
    max-width: 100%;
    height: 100%;
    display: table-cell;
    border: 1px solid; 
    padding: 5px;
    text-align: center;
}

Answer 4

我的回答用户 JQuery 的解决方案。

要设置 html，我使用 class 属性和 data-href。

<td class='clickable' data-href='www.knowhere.com'>Put anything you want here</td>

然后在页面底部插入 JQuery

<script type="text/javascript">
     $(".clickable").click(function(){
           window.location = $(this).data("href");
     });
</script>

所以这是如何工作的，JQuery 以 class 属性为目标寻找我们使用的可点击标签，一旦该区域被点击，它就会导致使用 data-href 并更改页面位置。

通过这种方式，所有具有可点击标签和 href 数据的元素现在都变成了 hyperlinks。

用这种方式而不是仅仅将 hyperlink 嵌入到单元格中，您会错过一些事情。

无蓝色下划线
浏览器底部没有URL路径
不是很明显 link

但其中一些可以轻松添加。

好处是整个单元格都可以点击，而不仅仅是文本。

如何使可点击 <td>

How to Make Clickable <td>

html

html-table