如何使 table 单元格链接并具有背景颜色？

Question

我正在使用 javascript 为 table 单元格动态着色。我希望单元格具有整个单元格的背景颜色，并且里面的文本应该是超链接的。我认为我不关心整个单元格是否是超链接的一部分

一个尝试是：

<td><a class="score" href="#">cell text</a></td>
<td><a href="#">cell text</a></td>
<td><a class="score" href="#">cell text</a></td>
...
...
<script>
  var colorScore = document.getElementsByClassName('score');
  for (i=0; i < colorScore.length; i++) {
    colorScore[i].style.backgroundColor = "red";
  }
</script>

这给了我一个单元格，其中只有文本是超链接的，并且只有文本有背景色。我还尝试将 class="score" 与 <td> 而不是 <a> 放在一起，但这没有提供任何背景颜色（但显然保留了超链接）。最后，我用 <td> 周围的 <a> 尝试了它，但这既没有给我超链接也没有背景颜色，我相信这在 html.

中是不允许的

我也在使用 Bootstrap 5，但我认为它没有提供任何解决方案。

Answer 1

您可以尝试将超链接目标存储在自定义属性中，并拦截将值分配给 window.location 的 click 事件。

我们可以像这样使用事件委托：

var colorScore = document.getElementsByClassName('score');
for (i = 0; i < colorScore.length; i++) {
  colorScore[i].style.backgroundColor = "red";
}
document.addEventListener("click", function(e) {
  let closest = e.target.closest('.score');
  if(closest) location = closest.dataset.href;
})

td {
  padding: 10px;
  border: 1px solid;
}

<table>
  <tr>
    <td class="score" data-href="https://stacksnippets.net"><a>cell text</a></td>
    <td><a href="#">cell text</a></td>
    <td class="score" data-href="https://stacksnippets.net"><a>cell text</a></td>
  </tr>
</table>

Answer 2

目前只有 a 元素正在获取背景。我们需要的是它的父元素来获取背景。

此代码片段执行此操作，而且为了演示，它为每个 td 提供了填充，因此我们可以看到单元格被红色覆盖，而不仅仅是文本。

var colorScore = document.getElementsByClassName('score');
for (i = 0; i < colorScore.length; i++) {
  colorScore[i].parentElement.style.backgroundColor = "red";
}

td {
  padding: 10px;
}

<table>
  <tr>
    <td><a class="score" href="#">cell text</a></td>
    <td><a href="#">cell text</a></td>
    <td><a class="score" href="#">cell text</a></td>
  </tr>
</table>

如何使 table 单元格链接并具有背景颜色？

How to make a table cell be linked and with background-color?

html

javascript

css

html-table