Question

我知道有很多关于这个的帖子，但我不能让它发挥作用。我想要做的就是拥有一个完整的<td>可点击。我有一个生成这个表的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＆＃34;可点击的＆＃34;实际上是可点击的。现在它...... [/ p>

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

将显示更改为阻止不仅会影响格式化，而且实际上也无法使单元格可单击。它会在悬停时将光标更改为指针，但实际点击进入网站并不起作用。

Answer 1

你应该永远不要使用表格标签而不是使用css，这是你问题的答案

<强> HTML

<div class="table" id="reservation_table">      
  <row>
    <p></p>
    <p>Dec. 18</p>
    <p>Dec. 20</p>
    <p>Dec. 21</p>
  </row>
  <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>
  </row>
  <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>
  </row>
</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 2

我的答案用户使用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属性，以查找我们使用的clickable标记，一旦单击该区域，它将导致使用data-href并更改页面位置。

通过这种方式，所有具有clickable标记和href-data的元素现在都变为超链接。

以这种方式进行操作时，您会错过一些事情，而不仅仅是将超链接嵌入到单元格中。

没有蓝色下划线
浏览器底部没有URL路径
它不是一个明确的链接

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

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

Answer 3

您应该确保<a>内的clickable填写整个td

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

Answer 4

如果你想要完整的td元素就像一个链接，你应该这样做。它将使用一些简单的javascript使你的整个td可点击。这里作为一个例子，它会在点击时改变td背景颜色为红色

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使可点击

4 个答案: