selectionrange для нескольких строк
 

Добрый день,

запутался с выделением, пожалуйста посоветуйте, в какую сторону копать.

Имею <div> в который я регулярно записываю большой (1000-10000) список достаточно длинных строк (название и спецификация эксперимента). Юзер может захотеть пометить одну или несколько строк, выбрав мышкой. После выбора я хотел как-то эти строки покрасить цветом, чтобы юзер мог бы выбрать не один блок строк, а несколько, и можно было отменить выбор, ну то есть как в винде при выборе файлов.

Строки генеряться из массива, который я получаю по JSON из сервера. Я могу к каждой строке что-то приписать, но хочу, чтобы производительность не пострадала.

По окончании мне нужен просто список номеров всех строк, что юзер решил выделить.

Скажите, пожалуйста, стоит ли мне на каждую строку поместить свой <div> со своим номером, или можно сделать как-то проще?

Если делать через onselectionchange то во-первых постоянно вызывается функция пока юзер меняет выделение, а хочется вызвать только когда он закончил, а также выделение происходит не по строкам, а по символам.

Может надо совсем в другую сторону посмотреть, пожалуйста, посоветуйте!

Спасибо!

<style>
.check {
    background-color: #D7F9FA;
}
</style>

<div id="list">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>

<script>

document.getElementById('list').addEventListener('click', function(e) {
    e.target.localName=='p' && e.target.classList.toggle('check')
}, true);
</script>

А когда необходимо, получить все элементы с классом check, это и будет выбор пользователя. Элементы, как и их контейнер могут быть любыми.

1000 длинных строк это больше 20 страниц текста (а 10 000 больше 200)
Юзер реально будет все это читать?
Может как то группировать их?

Спасибо большое, laimas за классный пример!

Почти то, что хочу! Но вот дополнительно очень хотелось бы, чтобы было еще так. Пусть у меня таких Text много, скажем сто, если юзер хочет с 20 по 50 пометить, то ему надо 31 раз кликнуть. Может тут надо как-то еще что-то забиндть, mouseup/mousedown, чтобы не 31 раз кликать, а разом их пометить.

Спасибо большое, voraa!

Я сам колеблюсь как тут правильно поступить. Я хочу реализовать поиск по базе данных сделанных экспериментов. Юзер их снимает примерно раз в 10 секунд и за год-два может набежать пару миллионов таких записей. Я планировал перед отрисовкой этого списка спрашивать юзера дату от и до когда он снял эксперименты, название эксперимента и еще несколько параметров. Далее по этому фильтру я ищу в базе данных список экспериментов и выплевываю на клиента только по одной строчке на каждый эксперимент, чтобы юзер далее пометил то, что он действительно хочет посмотреть. Поиск на сервере на С++, ибо сама база на пару терабайт может быть, эту часть уже реализовал, ищет быстро, около секунды, ибо там я полную индексацию всего что можно сделал.

Я планировал, что в случае если юзер слишком широко запрос организует, ограничить число строк и отрисовывать например только не больше 1000 строк, и это максимальное число юзер сам должен ввести в настройках, но юзер может таки решить посмотреть на большой набор в 10К экспериментов, но это он сам будет злобным чебурашкой, другое дело, что хочется дать ему в этом случае пометить список того, что ему надо.

Огромное спасибо всем, что помогали,

получилось, так как мне хочется!!!

Сейчас по ссылке
http://www.elegant-nmr.com/iii/ii.html
можно отмаркировать строчки, вида MyTest ... aaa ... ccc
и маркировка в точности по Вашим советам, и как мне хотелось можно отмаркировать несколько блоков.

Есть один вопрос вдогонку, пожалуйста, подскажите, в какую сторону посмотреть.

Когда мышкой я маркирую например с 3 по 9 строчку, эти строчки после маркировки становяться голубенькими (как мне и хотелось), но появляется дополнительная встроенная маркировка как если маркируешь текст, на скриншоте я маркировал с 3-ей по 9-ую строку.



Скажите, пожалуйста, как от сделать так, чтобы голубенькая моя маркировка была, а вот рыжая родная браузерная маркировка не видна была?

Спасибо!

-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

Супер, спасибо большое, laimas, все сразу заработало!!!

Вообще их больше с префиксами, если все учитывать:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Верно, спасибо Вам огромное, что помогаете!!!