1

我正在尝试使用然后调用两个 javascript 函数将 HTML<td>标记重置为其原始颜色。onclick

第一个函数将（希望）设置先前更改的颜色。

第二个函数将选定<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>
4

2 回答 2

2

您不需要两个函数来恢复单元格背景颜色。最好的做法是结合使用 css 和 js 来根据 UI 交互改变单元格的外观。请参阅我在这里创建的示例 jsfiddle：http: //jsfiddle.net/rYcMT/

--JavaScript--

    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>
于 2013-05-20T18:36:55.710 回答
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

演示：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";
}
于 2013-05-20T18:13:12.047 回答