VPF::Изменение цвета фона целой строки таблички

Oriander

Дата 13.7.2009, 13:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

Уважаемые гуру, помогите как реализовать табличку, чтобы при наведении на строку
мышкой - менялся её (строки) фон. Я знаю лишь как реализовать с помощью цсс, чтобы
меняла цвет фона ячейка, при наведении мышкой на нее

Код


<style>
td { width: 150px; }
a { display: block; width: 100%; height: 100%; text-align: center; text-decoration: none; color: #660000; }
a:hover { background: #ffff00; color: #0000ff; }

<table>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
</table>

А мне нужно, чтобы цвет фона менялся у всей строки.
Кажись, без JS не обойтись? Что скажите?
smile

Это сообщение отредактировал(а) Oriander - 13.7.2009, 13:58

Sanchezzz

Дата 13.7.2009, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

в обшем тебе нужно сделать класс на TR...

Код


function selectTr(_this){
  _this.class = 'highlight-tr';
}

function usselectTr(_this){
 _this.class = '';
}

Код


...
<tr onmouseover="selectTr(this)" onmouseout="usselectTr(this)">
 <td></t>
 <td></t>
</tr>
...

Это сообщение отредактировал(а) Sanchezzz - 13.7.2009, 14:38

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

Oriander

Дата 13.7.2009, 15:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

Дон Санчез, огромное спасибо.
Попробую, если выйдет поставлю значек "пометить, как решенный"

Это сообщение отредактировал(а) Oriander - 13.7.2009, 15:16

Oriander

Дата 13.7.2009, 15:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

Код



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css" />


<script language="javascript" type="text/javascript">
function selectTr(_this){
  _this.class = 'highlight-tr';
}

function usselectTr(_this){
 _this.class = '';
}
</script>

<style type="text/css">




body {
    margin:0px;
    padding:0px;
    
    }
.table {
 border: solid 1px #FFF;
 background-color:#d9f3f4;
 margin-left: -10px;
 }
 
.table tr, td {
 border: dotted 1px #FFF; }
 
 .highlight-tr{
    background-color: #FFF;
}

</style>
</head>




<tr onmouseover='selectTr(this)' onmouseout='usselectTr(this)'><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>

</body>
</html>

Что-то не получилось :( (на маркеры %с не обращаем внимания)

Oriander

Дата 13.7.2009, 16:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

это явно код на яве не так написан? А-то я вставил в tr просто class='...' и фон у строки был белый.
ПС: браузер - опера. Но и в интернет эксплорере не работает. помогите определить ошибку.
Может, дело в знаках пробела? _this - я их убирал, ничего не выходит

Добавлено через 12 минут и 4 секунды

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<script language="javascript" type="text/javascript">
function selectTr(_this){
  _this.class = 'highlight-tr';
}

function usselectTr(_this){
 _this.class = '';
}
</script>

<style type="text/css">

.highlight-tr{
    background-color: #000;
}
</style>
</head>

<body>

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr  onmouseover='selectTr(this)' onmouseout='usselectTr(this)'>
    <td>fdgdf</td>
  </tr>
</table>


</body>
</html>

Даже в таком простом варианте не работает

Это сообщение отредактировал(а) Oriander - 13.7.2009, 16:08

Oriander

Дата 13.7.2009, 16:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

Все-таки получилось, только я вместо class написал style. Почему же class не работает?

Veve

Дата 13.7.2009, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 291
Регистрация: 1.1.2005
Где: Латвия, Рига

Репутация: 1
Всего: 13

Код


function selectTr(_this){
  _this.setAttribute("class", "highlight-tr");
}
function usselectTr(_this){
 _this.setAttribute("class", "");
}

ksnk

Дата 13.7.2009, 17:01 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(Oriander @ 13.7.2009, 16:22

)

Почему же class не работает?

Потому что не class а className

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Oriander

Дата 13.7.2009, 17:39 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 67
Регистрация: 1.8.2007

Репутация: нет
Всего: нет

тема закрыта. благодарю активных учасников

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »