Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Изменение цвета фона целой строки таблички

Автор: Oriander 13.7.2009, 13:57

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

Код


<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

Автор: Sanchezzz 13.7.2009, 14:36

в обшем тебе нужно сделать класс на 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>
...

Автор: Oriander 13.7.2009, 15:16

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

Автор: Oriander 13.7.2009, 15:46

Код



<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

это явно код на яве не так написан? А-то я вставил в 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:22

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

Автор: Veve 13.7.2009, 16:33

Код


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

Автор: ksnk 13.7.2009, 17:01

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

)

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

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

Автор: Oriander 13.7.2009, 17:39

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