點擊表格內的文字點擊

Question

我得到了一段代碼，在點擊時創建一個highlightable textarea。我喜歡它的工作方式。但是，我只是想讓textarea看起來很簡單。我試圖使用一個表（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> 

Answer 1

您可以創建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>

---

注意

如果你不想change the prototype of a class you don't own，您可以創建一個方法，e.g：

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

然後調用它在你的td元素，e.g：

<td onclick="selectElement(this)">Box 1</td>