Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.02.2011, 00:33
j11 j11 вне форума
Новичок на форуме
Отправить личное сообщение для j11 Посмотреть профиль Найти все сообщения от j11
 
Регистрация: 18.02.2011
Сообщений: 5

Как сделать выделение
Задача такая.

Есть таблица например с строками(колонки убрал)

<tr class="one" onclick="vyd(1)" id="st1">
<tr class="two" onclick="vyd(2)" id="st2">
<tr class="one" onclick="vyd(3)" id="st3">
........
<tr class="one" onclick="vyd(n)" id="stn">

Тоесть неопределённое количество строк.

Что нужно.

1. при нажатии на строку вызывается функция vyd() с параметром от 1 до n(в зависимости от строки). Этот параметр мы записываем в произвольный div через innerHTML

2. строка на которую нажали выделяется например красным цветом
3. если нажимаем на неё повторно выделение снимается(и параметр не передаётся, тобиш innerHTML = "")
4. если нажимаем на другую строку то выделение снимается с первой и выделяется последняя строка(как бы одиночное выделение по всей таблице. только одну строку можно выделить)

Заранее, спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2011, 10:42
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

2) Меняй к примеру класс у строки которую надо выделить.
document.getElementById(id).setAttribute("class", "vyd");


3) В начале функции делай проверку, если текущая строка уже имеет класс выделения (class-"vyd") то тогда убирай этот класс и очищай div:
if (document.getElementById(id).className == 'vyd') {
	document.getElementById(id).setAttribute("class", "simple");
	document.getElementById('selected').innerHTML = '';
    }


4) Если условие по пункту 3 вернула false, то есть, былклик по другой строке, то как вариант в цикле пробегаешь по всем строкам, и снимаешь выделение, а той по которой кликнули, даешь выдиление.
var tr = document.getElementById('myTable').getElementsByTagName('tr');
		for(i=0;i<tr.length;i++)
			tr[i].setAttribute('class', 'simple');
		document.getElementById(id).setAttribute("class", "vyd");
		document.getElementById('selected').innerHTML = id;



Вот, как то так.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2011, 12:23
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

можно короче и проще

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.стиль1 {background-color: #000000;}
</style>
<script>
var z=false;
function as(i)
{
if(i!=z)
{
i.className="стиль1";
if(z!=false)
{
z.className="";
z=i;
}
else z=i;
}
else{i.className="";z=false;}

}
</script>
</head>

<body>
<table width="286" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="162" height="15"></td>
    <td width="124"></td>
  </tr>
  <tr>
    <td height="26" valign="top"  class="" onclick="as(this)">ffgg</td>
    <td></td>
  </tr>
  <tr>
    <td height="14"></td>
    <td></td>
  </tr>
  <tr>
    <td height="23" valign="top" class="" onclick="as(this)" >ttggg</td>
    <td></td>
  </tr>
  <tr>
    <td height="56">&nbsp;</td>
    <td></td>
  </tr>
</table>
</body>

Последний раз редактировалось dmitriymar, 23.02.2011 в 14:30.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 20:24
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать локальную переменную глобальной?? Дмитрий Общие вопросы Javascript 8 02.11.2010 03:33
Как сделать связанные поля ввода diakon Элементы интерфейса 2 11.12.2009 16:17
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43