更改行的顏色上點擊

我怎麼可以點擊指定的錶行，並更改所選行的背景顏色（在這個例子中，讓我們用紅色）。

然後，如果再次單擊之前選擇的同一行，請將其背景顏色更改爲默認值（白色）。

這裏是我的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的將工作..

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

編輯：沒有看過你的問題正確..

這會工作：

<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是純JavaScript的。 –

更改行的顏色上點擊

回答

相關問題