在单击时突出显示表格内的文本

Highlight text inside table on click

本文关键字：表格 文本 显示 单击      更新时间：2023-09-26

我在这里有一段代码，它在点击时创建了一个高亮的文本区域。我喜欢它的工作方式。然而，我只是想让文本区看起来简单。我试图使用表(1行/3列)，而不是相同的功能。

是否有一种方法，我可以使用一个表格，将突出显示里面的文本点击?关于如何实现这个目标，有什么专家建议吗?

<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 1</textarea>
<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 2</textarea>
<textarea style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.focus();this.select()" readonly="readonly">Box 3</textarea>

您可以按如下方式创建HTMLTableCellElement.prototype.select:

if (!('select' in HTMLTableCellElement)) {
  HTMLTableCellElement.prototype.select = function() {
    var range = document.createRange();
    range.selectNodeContents(this);
    window.getSelection().addRange(range);
  }
}
<table>
  <tr>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 1</td>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 2</td>
    <td style="color: black; background-color: lightyellow; border:1px solid #AD8C08" rows="2" cols="35" onclick="this.select()">Box 3</td>
  </tr>
</table>

注意

如果你不想改变一个你不拥有的类的原型，你可以创建一个方法，例如:

function selectElement(el) {
  var range = document.createRange();
  range.selectNodeContents(el);
  window.getSelection().addRange(range);
}

然后在td元素中调用它，例如:

<td onclick="selectElement(this)">Box 1</td>
相关文章：