Как сделать выделение
Задача такая.
Есть таблица например с строками(колонки убрал) <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) Меняй к примеру класс у строки которую надо выделить.
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;
Вот, как то так. |
можно короче и проще
<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"> </td>
<td></td>
</tr>
</table>
</body>
|
| Часовой пояс GMT +3, время: 05:13. |