重置html​​標記爲原始顏色

Question

我試圖重置一個HTML <td>標記爲它的原始顏色使用onclick然後調用兩個javascript函數。

第一個函數將（希望）設置先前更改的顏色。

第二個功能將所選的<td>更改爲青色背景色。 （這工作）。作爲這個函數的最後一步，我設置了一個var hold，它應該是<td> id。

在下一次更改期間，應該在第一個函數中使用var（hold）來恢復原始顏色。

我打電話的功能，像這樣：<td onclick(clear(); changecolor(element id);) ...more stuff>

如果我讓你感到困惑，該程序是一個日曆和選擇日期bgcolor變成青色。當選擇另一個日期時，我想將第一個日期更改爲白色。

<script type="text/javascript"> 
var hold; 

function mouseclick(el) { 
    el.style.color = "black"; 
    el.style.backgroundColor = "cyan"; 
    hold = el; 
} 
function clear() { 

    hold.style.color = "black"; 
    hold.style.backgroundColor = "white"; 
} 
</script> 

Answer 1

看起來你一次只想要一個元素來獲得顏色。

如果是這樣，只需給出一個應突出顯示的樣式的ID。然後，每當點擊一個，從第一個刪除身份證，並把它放在新的。

您可以使用「live nodeList」輕鬆完成此操作。

var tds = my_table.getElementsByTagName("td"); 

您將始終可以獲得ID爲列表的屬性。所以，如果你的ID是"active"，你會怎麼做：

tds.active; // gives the current TD with the "active" id 

---

DEMO：http://jsbin.com/ohadej/1

所以假設你有內嵌處理器，就像這樣：

<td onclick="changecolor(this)" ...></td> 

和CSS這樣：

#my_table td { 
    color: black; 
    background-color: white; 
} 
td#active { 
    color: black; 
    background-color: cyan; 
} 

您的代碼看起來是這樣的：

var tds = my_table.getElementsByTagName("td"); 

function changecolor(el) { 
    var current = tds.active; 
    if (current) 
     current.id = ""; 

    // (tds.active || {}).id = "active"; // shorter version of the 3 lines above 

    el.id = "active"; 
} 

Answer 2

你不需要兩個功能恢復的單元格背景顏色。最好的做法是將css & js一起使用，以基於UI交互更改單元格的外觀。見的jsfiddle我已經在這裏創建的示例：http://jsfiddle.net/rYcMT/

--Javascscript -

var cells = document.getElementsByTagName("td"); 
    for (var i = 0; i < cells.length; i++) { 
     cells[i].addEventListener('click', onClick, false); 
    } 


    function onClick(event){ 
     var el = event.target; 
     var id = el.getAttribute("id"); 

     el.className = 'selected'; 

     var others = document.getElementsByTagName("td"); 
     var oLength = others.length; 

     for(var i=0; i < oLength; i++){ 
     if(others[i].getAttribute("id") !== id){ 
      others[i].className = '';   
     } 
    } 
}; 

地方你的CSS如下所示： - CSS - .calendar，TR，TD { 邊界：1px solid #CCC; } 。日曆td {0}背景顏色：白色; }

.calendar td.selected{ 
    background-color: cyan; 
} 

- HTML -

<table class="calendar"> 
    <tr> 
     <td id="05012013">May 1</td> 
     <td id="05022013">May 2</td> 
     <td id="05032013">May 3</td> 
     <td id="05042013">May 4</td>  
    </tr> 
    <tr> 
     <td id="05052013">May 5</td> 
     <td id="05062013">May 6</td> 
     <td id="05072013">May 7</td> 
     <td id="05082013">May 8</td>  
    </tr> 
</table>