Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2018, 15:56
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

Инициировать событие по клику ячейки таблицы (
Всем доброго времени!
Прошу помощи! Стоит задачка:
Есть таблица, в таблице строки
при выборе ячейки строки и протаскивания (выделения нескольких ячеек) по другим ячейкам этой же строки, собрать значения этих ячеек.
Как это сделать?

Заранее спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2018, 16:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2018, 16:20
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

Спасибо за ответ, но есть одно но
выборка по одной строке необходимо, и выборка если выбрал ячеку то значение полностью ячейки и не часть, и там получается пусто значение можно получить...
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2018, 16:24
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

т.е. не выделять значения в чейках, а выделять саму ячекй,
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2018, 16:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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.
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2018, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

j0hnik,
выдели ячейки справа на лево и посмотри результат.
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2018, 17:33
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

Да, там лезет ошибка,+ ошибка если выделение делать с двух строк
Ответить с цитированием
  #8 (permalink)  
Старый 06.10.2018, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

содержимое выделенных ячеек строки
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>
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2018, 17:53
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
j0hnik,
выдели ячейки справа на лево и посмотри результат.
исправил
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разворачивающийся список по клику внутри таблицы mcdark Элементы интерфейса 3 14.05.2016 01:37
Отменить событие для ячейки таблицы kot_k_k jQuery 4 19.02.2016 13:46
Узнать номер ряда у ячейки таблицы grego Events/DOM/Window 2 27.08.2013 20:07
onmouseout для ячейки таблицы. Sir_Hally Events/DOM/Window 2 24.01.2012 17:21
OnClick ячейки таблицы и ссылки в этой ячейке MasDen Javascript под браузер 2 30.06.2011 10:34