Форум

alexan0308 · #1 (**permalink**) 11.04.2011, 14:25

Здравствуйте! Хочу при клике на ячейке таблицы с определенным id покрасить все ячейки с таким же id. Цвета возвращаются на место при втором клике, или при клике на ячейку с другим id.
Вот подсказал один добрый человек, но че то не работает ))

<script language="JavaScript">
function your_funct(cellId){
var cells = document.getElementsByTag('td');
for (i=0;i<cells.length;i++){>.id==cellId){
cells.style.backgroundColor = 'red';
} else {
cells.style.backgroundColor = 'white';
}
}
}
</script>

Таблица
<table border="1" width="33%">
<tr>
<td id="c1" onClick="your_funct('c1');">Text 1</td>
<td id="c1" onClick="your_funct('c1');" >Text 2</td>
</tr>
<tr>
<td id="c2" onClick="your_funct('c2');" >Text 3</td>
<td id="c2" onClick="your_funct('c2');" >Text 4</td>
</tr>
<tr>
<td id="c1" onClick="your_funct('c1');">Text 5</td>
<td id="c2" onClick="your_funct('c2');" >Text 6</td>
</tr>
</table>

Помогите найти ошибку!

melky · #2 (**permalink**) 11.04.2011, 14:41

элемент с ИДом - уникальный

при

<button id="but"> lol </button>

<button id="but"> two </button>

document.getElementById(" but ").onclick = function() {  alert(5);  }

алерт будет только на первой кнопке

walik · #3 (**permalink**) 11.04.2011, 14:46

Я так понимаю вам нужно при клике на ячейку закрашивать весь ряд, тогда лучше так сделать:

<html>
<head>
<script type="text/javascript" language="javascript">
function color(id) {
	var elems = document.getElementsByTagName('tr'),
	length = elems.length;
	for(i=0; i<length;i++)
		if (elems[i].id == id)
			elems[i].style.backgroundColor = 'red';
		else
			elems[i].style.backgroundColor = 'white';
}
</script>
</head>
<body>
<table border="1" width="33%"> 
<tr id="c1" onclick="color('c1');"> 
<td>Text 1</td>
<td>Text 2</td> 
</tr> 
<tr id="c2" onclick="color('c2');"> 
<td>Text 3</td>
<td>Text 4</td> 
</tr> 
<tr id="c3" onclick="color('c3');"> 
<td>Text 5</td> 
<td>Text 6</td>
</tr>
</table>
</body>
</html>

alexan0308 · #4 (**permalink**) 11.04.2011, 15:23

walik, спасиб!
Чуть переделал, мне все таки нужно было красить не ряд ячеек, а определенную совокупность. Чуть переделал твой код, все работает:
<html>
<head>
<script type="text/javascript" language="javascript">
function color(id) {
var elems = document.getElementsByTagName('td'),
length = elems.length;
for(i=0; i<length;i++)
if (elems[i].id == id)
elems[i].style.backgroundColor = 'red';
else
elems[i].style.backgroundColor = 'white';
}
</script>
</head>
<body>
<table border="1" width="33%">
<tr >
<td id="c1" onclick="color('c1');">Удав</td>
<td id="c3" onclick="color('c3');" >Шмел</td>
<td id="c1" onclick="color('c1');">Гадюка</td>
<td id="c2" onclick="color('c2');" >Орел</td>
</tr>
<tr >
<td id="c2" onclick="color('c2');">Стриж</td>
<td id="c1" onclick="color('c1');" >Питон</td>
<td id="c1" onclick="color('c1');">Кобра</td>
<td id="c3" onclick="color('c3');" >Мух</td>
</tr>
<tr >
<td id="c3" onclick="color('c3');" >Ос</td>
<td id="c2" onclick="color('c2');">Соловей</td>
<td id="c2" onclick="color('c2');">Воробей</td>
<td id="c1" onclick="color('c1');" >Уж</td>
</tr>
</table>
</body>
</html>

alexan0308 · #5 (**permalink**) 11.04.2011, 17:07

Опять проблема. Данный код прекрасно работает для приведенного примера и в опере, и в Экспловере 8. Сделал другую таблицу для своей задачи, и уже в опере работает, а в Экспловере нет! Чо такое?

alexan0308 · #6 (**permalink**) 11.04.2011, 17:29

А, нашел подробно анализируя...
'#328aa4' оба браузера понимают а
' #328aa4' с пробелом впереди эксплорер не понимает...

walik · #7 (**permalink**) 11.04.2011, 17:34

alexan0308,

Сообщение от melky

элемент с ИДом - уникальный

Поэтому для вашей задачи используйте классы.

alexan0308 · #8 (**permalink**) 11.04.2011, 17:48

Вот тут чувак написал

"8. Используйте «id» вместо классов, где это возможно". Конец цитаты ))

Статья
http://www.webmasters.by/articles/we...t-tips.html#p8

walik · #9 (**permalink**) 11.04.2011, 18:22

А по спецификации он должен быть уникальным

Цитата:

This attribute assigns a name to an elemen. This name must be unique in a document.

"Этот атрибут присваивает имя элемента. Это имя должно быть уникальным в документе." Конец цитаты ))
http://www.w3.org/TR/REC-html40-9712...l.html#adef-id

И даже в той статье не использовался один ID для разных элементов, там все элементы имели разные ID, он демонстрировал что по ID обращение быстрей чем по классу

alexan0308 · #10 (**permalink**) 11.04.2011, 19:42

Ну хорошо, а как мне переделать под класс?

Форум

Справочник

Discord чат

Курсы javascript