1

を使用して HTML<td>タグを元の色にリセットし、 onclick2 つの JavaScript 関数を呼び出しようとしています。

最初の関数は、(うまくいけば) 以前に変更された色を設定します。

2 番目の関数は、選択<td>した をシアンの背景色に変更します。（これは機能します）。この関数の最後のステップとして、<td>id を保持する var hold を設定します。

この 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

セルの背景色を元に戻すために 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 { 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

一度に 1 つの要素だけを色にしたいようです。

その場合は、強調表示する必要があるものに、スタイルが設定された ID を指定してください。次に、いずれかがクリックされるたびに、最初の ID から ID を削除し、新しい ID に配置します。

これは、「ライブ 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 に答える