Покрасить все ячейки таблицы с заданным id
Здравствуйте! Хочу при клике на ячейке таблицы с определенным 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> Помогите найти ошибку! |
элемент с ИДом - уникальный
при <button id="but"> lol </button> <button id="but"> two </button>
document.getElementById(" but ").onclick = function() { alert(5); }
алерт будет только на первой кнопке |
Я так понимаю вам нужно при клике на ячейку закрашивать весь ряд, тогда лучше так сделать:
<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>
|
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> |
Опять проблема. Данный код прекрасно работает для приведенного примера и в опере, и в Экспловере 8. Сделал другую таблицу для своей задачи, и уже в опере работает, а в Экспловере нет! Чо такое?
:blink: |
А, нашел подробно анализируя...
'#328aa4' оба браузера понимают а ' #328aa4' с пробелом впереди эксплорер не понимает... |
alexan0308,
Цитата:
|
Вот тут чувак написал
"8. Используйте «id» вместо классов, где это возможно". Конец цитаты )) Статья http://www.webmasters.by/articles/we...t-tips.html#p8 |
А по спецификации он должен быть уникальным :)
Цитата:
http://www.w3.org/TR/REC-html40-9712...l.html#adef-id И даже в той статье не использовался один ID для разных элементов, там все элементы имели разные ID, он демонстрировал что по ID обращение быстрей чем по классу |
Ну хорошо, а как мне переделать под класс?
|
Проверяешь класс а не ID:
function color(*!*class*/!*) {
// ... ... ...
if (elems[i].className == class)
// ... ... ..
Всем элементам места ID даешь класс. |
Сделал, все работает :thanks:
|
| Часовой пояс GMT +3, время: 11:41. |