在非输入元素中捕获“ Selstart”，“ Sel..end”

Question

我正在建立一个表格，其格式如下：。请原谅愚蠢的示例数据。 所有这些实际上都是用json加载的，但是输出看起来像这样：

<table id="famequotes">
<tr><td id="par001">It was the best of times, it was the worst of times.</td></tr>
<tr><td id="par002">Two things are infinite: the universe and human stupidity; and I'm not sure about the universe</td></tr>
<tr><td id="par003">In the jungle, the mighty jungle, the lion sleeps tonight...</td></tr>
</table>

使用$（“＃famequotes td”）上的mousedown和mouseup，我可以允许用户突出显示文本并捕获开始和结束行，并且类似地使用onmouseover捕获之间的所有行。

我想要做的是捕获开始行的SelStart（我从此处开始突出显示的表格单元格）和最后一行的sel ... stop。

尽管我已经进行了研究并已在Google上进行搜索，但我仍无法找到答案。

MIchal Hainc的回答确实很酷，但不是我想要的。

我可以看到选择框如何有用，并且我希望将其合并。

但是，我实际上要查找的是这样，如果用户像我在http://jsfiddle.net/vhyyzeog/1/中突出显示的那样突出显示文本，则selStart返回3，selEnd返回12。 我已经在跟踪突出显示的第一行和最后一行，因此我知道要应用selstart和selend的行。

感谢您的任何帮助。

Answer 1

我在这里为您制作了一个小提琴： http : //jsfiddle.net/jra9ttot/16/

我已经使用了jQuery UI小部件“ selectable” ... javascript是这样的：

您可以像在Windows资源管理器中一样进行选择...用鼠标将套索拖动到表格单元格上，它将选择多个...

    $(document).ready(function () {
        $('#famequotes').selectable({
            filter: 'td',
             start: function (event, ui) {
                $('#log').append('<div>selction start: ' + $(event.toElement).attr('id') + '</div>');
            },
            selected: function (event, ui) {
                $('#log').append('<div>selected item: ' + $(ui.selected).attr('id') + '</div>');
            },
            stop: function (event, ui) {
                var lastSelElem = $('#famequotes').find('td.ui-selected').last();
                 $('#log').append('<div>selection end: ' + $(lastSelElem).attr('id') + '</div>');
            }
        });
    });

Answer 2

我在Stack网站的其他地方找到了这个问题的答案。 它没有我想象的那么漂亮和完美。

来源： 侯赛因对“在div中获取选定文本的html”的回答

如果您想要的不只是基本的选定文本，这是如何从中获取有用数据的基础。

http://jsfiddle.net/YstZn/541/

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    console.log(window.getSelection().anchorNode.parentNode);
    console.log(window.getSelection().focusNode.parentNode);
    return t;
}

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var mytext = x.Selector.getSelected();
        alert(mytext);
    });
});

这不是我想象的那样，但是它确实提供了完成任务所需的要素。