如何改變背景顏色，當有人unclicks一個複選框

Question

要突出一個排我的代碼是：

function highlight_row(row_id) 
{ 
    var row = document.getElementById(row_id); 
    row.style.background = "yellow"; // background yellow 
} 

我的HTML代碼：

<tr id="row_{{ forloop.counter }}"><td>{{ word.n }}</td><td style="padding:0;"><a href="/search/?q={{ word.word }}" style="padding:5px;display:block;color:blue;">{{ word.word }}</a></td><td style="text-align:center"><input type="checkbox" name="checkbox_{{ word.id }}" onclick="highlight_row('row_{{ forloop.counter }}')" /></td></tr> 

我怎麼做我unhighlight行，當用戶取消選中該行的複選框？

Answer 1

增加「這個」調用函數：

<td style="text-align:center"> 
<input type="checkbox" 
     name="checkbox_{{ word.id }}" 
     onclick="highlight_row('row_{{ forloop.counter }}',this)" /> 
</td> 

現在你可以使用chechbox的選中狀態，以確定該怎麼做：

function highlight_row(row_id,checkbox) 
{ 
    var row = document.getElementById(row_id); 
    row.style.background = checkbox.checked ? "yellow" : ""; 
} 

Answer 2

function highlight_row(row_id) 
{ 

    if (!highlight_row.toggleColor) highlight_row.toggleColor = 0; 
    var row = document.getElementById(row_id); 
    row.style.background = (highlight_row.toggleColor%2==0) ? "yellow" : ''; // put alternate color in '' 
    highlight_row.toggleColor++; 
} 

Answer 3

你的意思是這樣的？

function highlight_row(row_id) 
{ 
    var row = document.getElementById(row_id); 
    if (row.style.background !== "yellow") { 
    row.style.background = "yellow"; 
    } 
    else { 
    row.style.background = "white"; 
    } 
}