06.10.2018, 15:56
|
Профессор
|
|
Регистрация: 28.02.2018
Сообщений: 172
|
|
Инициировать событие по клику ячейки таблицы (
Всем доброго времени!
Прошу помощи! Стоит задачка:
Есть таблица, в таблице строки
при выборе ячейки строки и протаскивания (выделения нескольких ячеек) по другим ячейкам этой же строки, собрать значения этих ячеек.
Как это сделать?
Заранее спасибо!!!
|
|
06.10.2018, 16:11
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<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>
Последний раз редактировалось j0hnik, 06.10.2018 в 16:16.
|
|
06.10.2018, 16:20
|
Профессор
|
|
Регистрация: 28.02.2018
Сообщений: 172
|
|
Спасибо за ответ, но есть одно но
выборка по одной строке необходимо, и выборка если выбрал ячеку то значение полностью ячейки и не часть, и там получается пусто значение можно получить...
|
|
06.10.2018, 16:24
|
Профессор
|
|
Регистрация: 28.02.2018
Сообщений: 172
|
|
т.е. не выделять значения в чейках, а выделять саму ячекй,
|
|
06.10.2018, 16:52
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<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, 06.10.2018 в 17:52.
|
|
06.10.2018, 17:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
j0hnik,
выдели ячейки справа на лево и посмотри результат.
|
|
06.10.2018, 17:33
|
Профессор
|
|
Регистрация: 28.02.2018
Сообщений: 172
|
|
Да, там лезет ошибка,+ ошибка если выделение делать с двух строк
|
|
06.10.2018, 17:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
содержимое выделенных ячеек строки
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>
|
|
06.10.2018, 17:53
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Сообщение от рони
|
j0hnik,
выдели ячейки справа на лево и посмотри результат.
|
исправил
|
|
|
|