單擊使用 jquery 選擇表格中單元格的文本

Question

我正在使用 jquery-3.5.1。
谷歌瀏覽器版本 86.0.4240.75
我的 html 表有 id="example"。
我在表中有一個 class="myclass" 的列。

當我單擊該表格該列中的一個單元格時，我希望該單元格中的整個文本突出顯示......我的意思是，被選中，使其變為藍色，我可以復制和粘貼該文本。

我試過這個...

$("#example").on("mouseup", "td.myclass", function() {
    alert( "Handler for .click() called." );
    $(this).select();
});

alert() 觸發但單元格文本不會突出顯示。 如果我注釋掉 alert() 什么都不會發生。 不確定如何在開發工具中調試

我究竟做錯了什么？

Answer 1

使用可以像這樣使用createRange & getSelection api：

$("#example").on("mouseup", "td.myclass", function(e) {
    let range = document.createRange();
    range.selectNode(e.target);
    getSelection().removeAllRanges();
    getSelection().addRange(range);
});

Answer 2

突出顯示表格中的文本並不真正需要 jQuery 功能。 您需要使用Selection對象中的 API。

 $("#example").on("mouseup", "td.myclass", function() { let range = new Range(); range.setStart(this, 0); range.setEnd(this, this.childNodes.length); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="example" border="1"> <tbody> <tr> <td class="myclass">Cell 1</td> <td class="myclass">Cell 2</td> </tr> <tr> <td class="myclass">Cell 3</td> <td class="myclass">Cell 4</td> </tr> </tbody> </table>