javascript - 单击时在不可编辑的 td 上设置焦点并显示轮廓

Question

我正在创建一个电子表格。有些单元格有时是不可编辑的。当单击不可编辑的单元格或在 td 上调用 focus() 时，我仍然希望在单元格周围显示蓝色轮廓。但是当我将 contentEditable 设置为 false 时，当我单击它们或调用 focus() 时它不会选择单元格。

<table style="width:350px">
  <tr>
    <th>Title</th>
    <th>Title</th>
  </tr>
  <tr>
    <td>
      <div contenteditable="true">This can be in focus</div>
    </td>
    <td>
      <div id="id">This can not be in focus</div>
    </td>
  </tr>
</table>

https://jsfiddle.net/cshgzrxa/1/

标签： javascripthtmlfocus