Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 19.12.2011, 07:25   #1
irt
Пользователь
 
Аватар для irt
 
Регистрация: 24.02.2011
Сообщений: 20
Смущение [Javascript] Выделение строки и столбца относящихся к ячейке таблицы

Всем гуру здрасте
Прошу помочь в доведении до ума одной маленькой задачи. Извиняюсь что отвлекаю. Заранее спасибо

Дано:
Таблица неизвестной длинны(задаётся пользователем), которая строится с помощью php. Верхняя строчка и первый столбец - элементы th, остальные - td. По элементы, находящиеся по диагонали (строка 1, столбец 1; строка 2, столбец 2 и тд.) имеют класс "cross" и покрашены в другой цвет.
Пример(заполнено значениями таблицы умножения для наглядности):
http://i068.radikal.ru/1112/93/cd2e238be2d1.png

Задача:
1)При наведении на ячейку таблицы соответствующая строка и столбец должны выделяться(менять цвет фона).
2)Выделение должно происходить только слева и сверху до выбранной ячейки. Остальные ячейки должны остаться не тронутыми.
3)Строчки заголовков(th) и выбранная ячейка должны быть выделены другим цветом, отличным от цвета выделения.
4)При клике мышкой на ячейку положение должно зафиксироваться и не меняться. При повторном клике на любой ячейке фиксация убирается и все возвращается в нормальное положение.
Пример:
http://s014.radikal.ru/i329/1112/36/4bc26fa9f5db.png (выделен 4 столбец 9 строчки)

Решение:
Создаём 3 функции select, unselect, click. С двумя входными параметрами (строкой и столбцом). Подписываемся на события onMouseOver, onMouseOut, onClick у элементов <td>.
Дабы выделить что-то, передаём функции номер строки и столбца ячейки, в которой возникло событие onMouseOver. Далее проходим по циклу по каждому столбцу и строке и задаём им другой цвет фона, до того момента пока не достигнем выбранного столбца. Отдельно красим элементы th и саму ячейку.
При генирации onMouseOut вызываем ф-ю unselect передавая так же номер строки и столбца и таким же образом как и в первом случае красим все остальные ячейки в стандартный цвет.
Далее, нужно определить ячейки которые стоят по-диагонале и вернуть им изначальный цвет, который мы убрали при выделении.

Ну и последняя задача - фиксирование.
Создаём глобальную переменную selected булевского типа, инициализируем значением false. при событии onClick вызываем ф-ю click():
1)меняем значение переменной на обратное
2) если выделено - запоминаем строчку и столбец (в глобальные переменные), иначе - вызываем unselect по запомненным ранее координатам и выделяем текущий.

Код:
	<script type="text/javascript">
		var selected=false;
		var x;
		var y;
		function unselect(row,col){
			if (selected)
				return;
			for (var i=2; i<=row; i++){
				var e=document.getElementById(i+"_"+col);
				e.style.background="#fff";
				if (e.className=="cross")
				e.style.background="#6f0";
			}
			for (var i=2; i<=col; i++){
				var e=document.getElementById(row+"_"+i);
				e.style.background="#fff";
				if (e.className=="cross")
				e.style.background="#6f0";
			var e=document.getElementById(row+"_"+1);
				e.style.background="#09f";
			var e=document.getElementById(1+"_"+col);
				e.style.background="#09f";
			}
			
		}
		function select(row,col){
			if (selected)
				return;
			for (var i=2; i<=row; i++){
				var e=document.getElementById(i+"_"+col);
				e.style.background="#ccf";
				}
			for (var i=2; i<=col; i++){
				var e=document.getElementById(row+"_"+i);
				e.style.background="#ccf";
			}
			var e=document.getElementById(row+"_"+col);
				e.style.background="#369";
			var e=document.getElementById(row+"_"+1);
				e.style.background="#fff";
			var e=document.getElementById(1+"_"+col);
				e.style.background="#fff";
		}
		function click(row, col){
			selected = (selected)? false:true;
			if (selected){
				x = row;
				y = col;
			}
			else{
				unselect(x,y);
				select(row, col);
			}
		}
	</script>
Все работает корректно, но беспокоит сама реализация. Она громоздкая и сделана через заднее место. Собственно для этого я и написал эти многобукф ради того, чтобы спросить - как лучше и корректнее реализовать все это?
Конкретно беспокоит что каждой ячейки таблицы нужно задавать своё значение id и работать через него. Может у кого-нибудь есть другие варианты как обойтись без этого?
irt вне форума Ответить с цитированием
Старый 19.12.2011, 15:32   #2
nerv
Форумчанин
 
Аватар для nerv
 
Регистрация: 26.04.2010
Сообщений: 450
По умолчанию

Сразу скажу, я не гуру) Может быть следующий код будет Вам полезен
Код:
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { background-color:#ffcc33; margin:0px; }
        </style>
        <script type="text/javascript">
            function l(event) {
                with(event.target || event.srcElement) {
                    var row = parentNode.rowIndex + 1;
                    var column = cellIndex + 1;
                }
                alert("строка:" + row + ", столбец:" + column);
            }
        </script>
    </head>
    <body>
        <table border="1" height="200px" width="400px" onclick="l(event)">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
    </body>
</html>
Тишина – самый громкий звук

Последний раз редактировалось nerv; 19.12.2011 в 15:38.
nerv вне форума Ответить с цитированием
Старый 19.12.2011, 16:45   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Если бы только наведение, то было бы проще, через цсс:
Код:
col:hover {background:#f00;}
tr:hover {background:#f00;}
Только для этого до первой строки нужно напихать тегов <col>.
С кликами (переключениями режима) — можно поэкспериментировать с другими псевдоклассами типа :focus, :active.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 19.12.2011, 18:52   #4
irt
Пользователь
 
Аватар для irt
 
Регистрация: 24.02.2011
Сообщений: 20
По умолчанию

2nerv
Цитата:
Сразу скажу, я не гуру) Может быть следующий код будет Вам полезен
Интересно, спасибо на досуге попробую)

2Naive
Цитата:
Если бы только наведение, то было бы проще, через цсс:
ну про псевдо класс css hover то я знаю и изначально спомощью него сделал выделение строки... Но вот как сделать выделение столбцов средствами css у меня идей нет, ибо сами ячейки <td> лежат в разных контейнерах и при наведении, выделится только одна - текущая... А нужна именно линия столбца Гугл тоже мягко намекнул что придется использовать javascript

Последний раз редактировалось irt; 19.12.2011 в 18:54.
irt вне форума Ответить с цитированием
Старый 19.12.2011, 20:58   #5
nerv
Форумчанин
 
Аватар для nerv
 
Регистрация: 26.04.2010
Сообщений: 450
По умолчанию

Примерно как-то так. Снятие выделения не отрабатывал. Пока только F5.
Код:
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin:0px; }
            td { background-color:#ccffcc; color:#0066cc; }
            .on { background-color:#ffcc00; }
            .off { }
        </style>
        <script type="text/javascript">
            function l(event) {
                var el = event.target || event.srcElement;

                for(var i = el.parentNode.rowIndex; i >= 0; i--) {
                    el.offsetParent.rows[i].cells[el.cellIndex].className = "on";
                }
                
                for(var i = el.cellIndex; i >= 0; i--) {
                    el.offsetParent.rows[el.parentNode.rowIndex].cells[i].className = "on";
                }
            }
        </script>
    </head>
    <body>
        <table border="1" height="200px" width="400px" onclick="l(event)">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>0</td>
            </tr>
        </table>
    </body>
</html>
Тишина – самый громкий звук
nerv вне форума Ответить с цитированием
Старый 22.12.2015, 22:59   #6
leon2009sp
Форумчанин
 
Регистрация: 22.12.2015
Сообщений: 119
Сообщение подсчитать количество выделенных ячеек

здравствуйте! а как подсчитать количество выделенных ячеек в таблице?
Код:
<html>
<head>
<style>
.old
{
cursor: pointer;
text-align: center;
background-image: url(image/xb.png);
}
.new.old
{
background-image: url(image/x.png);
}
</style>

<script>
window.addEventListener('DOMContentLoaded', function() 
{
[].forEach.call(document.querySelectorAll('.old'), function(item) 
{
item.addEventListener('click', function() 
{
item.classList.toggle('new')
});
});
});
</script>


</head>
<body>
<table align="left" border="1" cellpadding="12" cellspacing="10" width="350" BORDERCOLOR="#ff0000" class="table">
<tr>
<td align="center" class="old">1</td>
<td align="center" class="old">2</td>
<td align="center" class="old">3</td>
<td align="center" class="old">4</td>
<td align="center" class="old">5</td>
<td align="center" class="old">6</td>
</tr>
</table>
</body>
</html>

Последний раз редактировалось leon2009sp; 22.12.2015 в 23:01. Причина: заменил php на code
leon2009sp вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение цветом столбца и строки активной ячейки cerberochek Microsoft Office Excel 7 28.11.2012 12:56
Выделение столбца, включающего объединенные ячейки jimmyyong Microsoft Office Excel 1 18.11.2010 01:46
Определение названия столбца по ячейке lohmatiy БД в Delphi 2 13.05.2010 03:24
Выделение диапазона по наличию в ячейке (ячейках) текста или метки as-is Microsoft Office Excel 7 08.03.2010 18:09
Выделение последнего столбца в таблице Busine2009 Microsoft Office Word 2 26.05.2009 07:20