Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Нарисовать стрелку в таблице  [new]
Maksimka-27
Member

Откуда:
Сообщений: 14
Добрый день!

Нужна помощь в реализации.

Есть таблица формата:
<table>
	<tr>
		<th></th><th>1</th><th>2</th><th>3</th><th>4</th>		
	</tr>
	<tr>
		<td>Строка</td><td>c1</td><td></td><td></td><td></td>
	</tr>
	<tr>
		<td>Строка</td><td></td><td>c2</td><td></td><td></td>
	</tr>
	<tr>
		<td>Строка</td><td></td><td></td><td>c3</td><td></td>
	</tr>
	<tr>
		<td>Строка</td><td></td><td></td><td></td><td>c4</td>
	</tr>	
</table>


В зависимости от содержания нужно динамически нарисовать стрелку (например) от ячейки c3 к c1.
На картинке - как это нарисовано в Екселе.

Подскажите, в какую сторону копать?
1 фев 19, 12:29    [21799531]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16241
Maksimka-27,

таблица position:absolute в div, стрелка(кртинка png c прозрачностью, или svg) position:absolute в том же div
определить координаты нужных ячеек и поместить в нужное место +z-index
1 фев 19, 12:35    [21799543]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
Maksimka-27
Member

Откуда:
Сообщений: 14
Начал копаться там, где ни разу не был, и вот засада - картинка рисуется не там.

var yy = document.getElementById(se1).getBoundingClientRect(); // левая верхняя ячейка куда указывает стрелка
svg.style.position = "absolute";
svg.style.left = yy.right; // не ошибка, картинка справа ячейки
svg.style.top = yy.top;
....

Причем в Хроме, при изменении масштаба страницы (плюс перезагрузка), картинка "гуляет". - чем меньше масштаб, тем больше удаляется вправо (и вниз).

Где неправильно посмотрел?
5 фев 19, 07:44    [21801681]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16241
Maksimka-27,

тут https://jsfiddle.net/ сделай вариант, что б было что видеть
5 фев 19, 09:39    [21801711]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16241
Maksimka-27,

https://jsfiddle.net/jyg4v1nt/
тонкости координат конца и начала стрелки сам определишь
5 фев 19, 17:34    [21802110]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
Maksimka-27
Member

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

Проблема решена.
6 фев 19, 06:34    [21802308]     Ответить | Цитировать Сообщить модератору
 Re: Нарисовать стрелку в таблице  [new]
Maksimka-27
Member

Откуда:
Сообщений: 14
вадя, Спасибо!

У меня примерно то же самое [url=]https://jsfiddle.net/eLtov38u/1/[/url]
Как выше писал, проблема крылась в том, куда попал скрипт на реальной странице
6 фев 19, 06:46    [21802312]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить