VPF::backgroundColor - Форум программистов

Алексей

Дата 27.8.2008, 09:50 (ссылка)

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

Загрузка ...

Шустрый

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

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

Помогите, пожалуйста реализовать следующее:
есть таблица. при наведении на строку, вся строка выделяется цветом. Когда мышку убираем, цвет изменяется на прежний. Если нажимаем, то цвет остается, пока не кликнем в другое место.

comtat

Дата 27.8.2008, 09:59 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

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

http://forum.vingrad.ru/forum/topic-219956.html в этой теме сделано но нужно доделать для кликов

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

Рожденный в СССР !!!
ExtJS - мой фреймворк

Алексей

Дата 27.8.2008, 12:45 (ссылка)

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

Загрузка ...

Шустрый

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

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

Так мне с кликами и непонятно(

comtat

Дата 27.8.2008, 13:36 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

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

Цитата(Алексей @ 27.8.2008, 12:45

)

Так мне с кликами и непонятно(

что именно вызывает затруднение ??

Код


<html>
<head></head>
<body>
<style>
.active { background-color:red; }
.clicked { background-color:yellow; }
.unactive { background-color:white; }
</style>
<script>
function highlightRow_c(elem) {
    if (!elem.className || elem.className != 'clicked')
        elem.className = 'clicked';
    else if (elem.className == 'clicked')
        elem.className = 'active';
    else
        elem.className = 'unactive';
}

function highlightRow(elem, type) {
    if (type == 'on') {
        elem.className = 'active';
    } else {
        elem.className = 'unactive';
    }
}
</script>
<table border=1>
    <tr id='row1' onclick="highlightRow_c(this);" onmouseover="highlightRow(this, 'on');" onmouseout="highlightRow(this, 'off');">
       <td>666</td>
       <td>333</td>
    </tr>
    <tr id='row2' onclick="highlightRow_c(this);" onmouseover="highlightRow(this, 'on');" onmouseout="highlightRow(this, 'off');">
       <td>777</td>
       <td><input type='button' name='dde' value='dddd' /></td>
    </tr>
</table>
</body>
</html>

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

Рожденный в СССР !!!
ExtJS - мой фреймворк

Nigel

Дата 27.8.2008, 22:11 (ссылка)

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

Загрузка ...

познаю мир

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

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

comtat, немного неправильный скрипт - нет запоминания. Вот улучшенная версия)

Код


<html>
<head></head>
<body onLoad="markRowsInit()">
<style>
.active { background-color:red; }
.clicked { background-color:yellow; }
.unactive { background-color:white; }
</style>
<script>
function markRowsInit() {
  var rows = document.getElementsByTagName('tr');
  for(i=0;i<rows.length;i++) {
    rows[i].onmouseover = function() {
        this.className += ' active';
    }
    rows[i].onmouseout = function() {
        this.className = this.className.replace( ' active', '');
    }
    rows[i].onclick = function() {
        if(this.marked==null || this.marked == false) {
        this.className += ' clicked';
        this.marked = true;
        } else {
        this.className = this.className.replace( ' clicked', '');
        this.marked = false;
        }
    }
  }
}
</script>
<table border=1>
    <tr id='row1'>
       <td>666</td>
       <td>333</td>
    </tr>
    <tr id='row2'>
       <td>777</td>
       <td><input type='button' name='dde' value='dddd' /></td>
    </tr>
</table>
</body>
</html>

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