0

個々のTDをクリックしたときにテーブルTDを強調表示するこのJavaScript関数があります

<script type="text/javascript">
    window.onload = function(){
    var all = document.getElementsByClassName("clicker");
    for (var i=0;i<all.length;i++) {
        all[i].onclick = inputClickHandler;       
    }
};

function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(0, 153, 0)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#009900';
    }
}
    </script>

そして、私は8 x 8のテーブルを持っていて、それらはすべて正方形です。テーブルの上に、次のような選択メニューのあるフォームがあります。

<form id="filter">
<select id="highlights" name="highlights">
<option value="0"> Select... </option>
<option value="20"> 20 </option>
<option value="24"> 24 </option>
<option value="28"> 28 </option>
<option value="30"> 30 </option>
</select>

基本的に私が欲しいのは、ユーザーがハイライトフォームからオプションを選択することです。つまり、「24」を選択すると、テーブル内の「24」の正方形のみがハイライト表示されます。「24」から「28」に変更した場合、「28」を強調表示し、選択したものを超えないようにします。どうすればいいですか？

4

1 に答える 1

2

次のようなことをしてください。

var max = 0, highlighted = 0
document.getElementById('highlights').onchange = function () {
  max = this.value
}
...
function inputClickHandler(e){
  e = e||window.event;
  var tdElm = e.target||e.srcElement;
  if(tdElm.style.backgroundColor == 'rgb(0, 153, 0)'){
    highlighted--
    tdElm.style.backgroundColor = '#fff';
  } else if (highlighted != max) {
    highlighted++
    tdElm.style.backgroundColor = '#009900';
  }
}
于 2012-08-30T10:32:37.577 に答える