Изменение цвета строки на клик

Используя только чистый JavaScript:Изменение цвета строки на клик

Как я могу нажать на определенную строку таблицы, а также изменить цвет фона выбранной строки (в данном примере, позволяет использовать красный цвет) ,

Затем, если повторная выбранная ранее строка снова нажата, измените ее цвет фона на значение по умолчанию (белый).

Вот мой HTML:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Language" content="en-ca"> 

</head> 

<body> 

<table border="1" cellspacing="1" width="100%" id="table1"> 
    <tr> 
     <th>Column1</th> 
     <th>Column2</th> 
     <th>Column3</th> 
     <th>Column4</th> 
     <th>Column5</th> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
</table> 

</body> 

</html>

источник

2013-07-24 John Smith

С "чистого JavaScript" вы имеете в виду, что вы не можете использовать дополнительные библиотеки, как JQuery ? Если да, то почему? – jsalonen

Пожалуйста, добавьте часть JavaScript, над которой вы работаете, чтобы кто-то мог ее улучшить. – insertusernamehere

Простой пример: http://jsfiddle.net/5YYsL/ – Ian

$(document).ready(function() { 
    $('tr').click(function() { 
     //Check to see if background color is set or if it's set to white. 
     if(this.style.background == "" || this.style.background =="white") { 
      $(this).css('background', 'red'); 
     } 
     else { 
      $(this).css('background', 'white'); 
     } 
    }); 
});

jsFiddle Example

источник

2013-07-24 20:18:01 Unknown

что-то вроде этого на вашем ТРЕ будет работать ..

<tr onclick="this.style.backgroundColor='red'">

EDIT: не читал ваш вопрос правильно ..

это будет работы:

<script> 
    function changeColor(o){ 
     o.style.backgroundColor=(o.style.backgroundColor=='red')?('transparent'):('red'); 
    } 
</script>

и на вашем Tr:

<tr onclick="changeColor(this)">

источник

2013-07-24 19:55:59

не уверен, почему голосующий голос здесь. Jsfiddle http://jsfiddle.net/kYjz7/ –

-1

использование JQuery и увидеть, например, на http://jsfiddle.net/X2pJN/

$('table tr').each(function(a,b){ 
    $(b).click(function(){ 
     $('table tr').css('background','#ffffff'); 
     $(this).css('background','#ff0000'); 
    }); 
});

источник

2013-07-24 19:56:35

NP, но jQuery IS чистый javascript. –

Изменение цвета строки на клик

ответ

Смежные вопросы