单击时如何更改单元格 <td> 的底部边框大小？ [关闭]

Question

Example 必须更改的网格布局和边框。如图所示，例如，我想根据单击的边框更改红色矩形或任何其他边框内的特定边框宽度或高度。我怎样才能做到这一点？如何绘制与 small square 边框相同宽度或高度的水平线或垂直线。

我首先考虑使用方形 div 网格，然后使用表格元素和画布，但无法找到我想要实现的解决方案。

Answer 1

这样的事情会达到你想要的吗？

    <style>
  td {
    border: 1px solid black;
  }

  td.clicked {
    border-bottom: 5px solid black;
  }
</style>

<table>
  <tr>
    <td id="cell1" onclick="changeBorder(this)">1</td>
    <td id="cell2" onclick="changeBorder(this)">2</td>
    <td id="cell3" onclick="changeBorder(this)">3</td>
  </tr>
  <tr>
    <td id="cell4" onclick="changeBorder(this)">4</td>
    <td id="cell5" onclick="changeBorder(this)">5</td>
    <td id="cell6" onclick="changeBorder(this)">6</td>
  </tr>
  <tr>
    <td id="cell7" onclick="changeBorder(this)">7</td>
    <td id="cell8" onclick="changeBorder(this)">8</td>
    <td id="cell9" onclick="changeBorder(this)">9</td>
  </tr>
</table>

<script>
  function changeBorder(cell) {
    cell.classList.add("clicked");
  }
</script>