Форум

j11 · #1 (**permalink**) 23.02.2011, 00:33

Задача такая.

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

<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. если нажимаем на другую строку то выделение снимается с первой и выделяется последняя строка(как бы одиночное выделение по всей таблице. только одну строку можно выделить)

Заранее, спасибо

walik · #2 (**permalink**) 23.02.2011, 10:42

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;

Вот, как то так.

dmitriymar · #3 (**permalink**) 23.02.2011, 12:23

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

<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>

Форум

Справочник

Discord чат

Курсы javascript