Question

我正在尝试使用<td>将HTML 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。然后，只要单击一个，就从第一个中删除ID，并将其放在新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＆amp; 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 { border：1px solid #CCC; } .calendar td { 背景颜色：白色; }

.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>

将html标记重置为原始颜色

2 个答案: