Инициировать событие по клику ячейки таблицы (
Всем доброго времени!
Прошу помощи! Стоит задачка: Есть таблица, в таблице строки при выборе ячейки строки и протаскивания (выделения нескольких ячеек) по другим ячейкам этой же строки, собрать значения этих ячеек. Как это сделать? Заранее спасибо!!! |
<table border="1" id="tab"> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> </table> <script> tab.onmouseup = e => console.log(getSelection().toString().split(/\t+|\n+/)); </script> |
Спасибо за ответ, но есть одно но
выборка по одной строке необходимо, и выборка если выбрал ячеку то значение полностью ячейки и не часть, и там получается пусто значение можно получить... |
т.е. не выделять значения в чейках, а выделять саму ячекй,
|
<style> table{ border-collapse: collapse; } td{ border: 1px solid gray; } </style> <table id="tab"> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> </table> <script> tab.onmouseup = e => { var tds = document.querySelectorAll('#tab td'); var start = getSelection().anchorNode.parentNode; stop = getSelection().focusNode; stop = stop.tagName == 'TD'? stop:stop.parentNode; if([].indexOf.call(tds, start)>[].indexOf.call(tds, stop)) [start,stop] = [stop,start]; if(stop.parentNode != start.parentNode) { console.error('МИМО! Можно выделять только одну строку!'); return; } var arr = [start.textContent]; while(stop !=start) { start = start.nextElementSibling; arr.push(stop.textContent); } console.log(arr); }; </script> |
j0hnik,
выдели ячейки справа на лево и посмотри результат. |
Да, там лезет ошибка,+ ошибка если выделение делать с двух строк
|
содержимое выделенных ячеек строки
Sergey1986,
<style> table{ border-collapse: collapse; } td{ border: 1px solid gray; } </style> <table id="tab"> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> </table> <script> var tds = [...tab.querySelectorAll('td')]; function idx(td) { return tds.indexOf(td) } tab.onmouseup = e => { var start = getSelection().anchorNode.parentNode, tr = start.parentNode, stop = getSelection().focusNode; stop = stop.tagName == 'TD'? stop:stop.parentNode; start = idx(start); stop = idx(stop); var min = Math.min(start, stop), max = Math.max(start, stop), arr = [...tr.querySelectorAll('td')] .filter(e => idx(e) >= min && idx(e) <= max) .map(e => e.textContent); console.log(arr); }; </script> |
Цитата:
|
Часовой пояс GMT +3, время: 16:48. |