0

私は次の課題で立ち往生しています：

  • 私のテーブルには、さまざまなオプション (クラス) を含む、偶数/奇数行の基本的な (静的) 交互配色があります。
  • さらに、Javascript は以下を提供する必要があります。
    1. カーソルが指している行を示すロールオーバー効果 (onmouseover、onmouseout)
    2. マウス クリック (onclick) によって選択されたオプションを含む行の特定の色。

次のコードを思いつきました：

<html>
<head>

<style type="text/css">
tr.moduleRow-odd {
    BACKGROUND-COLOR            : #FF0000;
}

tr.moduleRow-even {
    BACKGROUND-COLOR            : #00FF00;
}

.moduleRowOver-odd, .moduleRowOver-even {
    BACKGROUND-COLOR            : #D7E9F7;
}

.moduleRowSelected-even, .moduleRowSelected-odd {
    BACKGROUND-COLOR            : #0000FF; 
}
</style>

<script type="text/javascript"><!--
var selected;

function selectRowEffect(object, buttonSelect) {
  if (!selected) {
    if (document.getElementById) {
      selected = document.getElementById('defaultSelected');
    } else {
      selected = document.all['defaultSelected'];
    }
  }

if (selected) {

if (selected.className == 'moduleRow-even' || selected.className == 'moduleRowSelected-even') {
selected.className = 'moduleRow-even';
object.className = 'moduleRowSelected-even';
}

if (selected.className == 'moduleRow-odd' || selected.className == 'moduleRowSelected-odd') {
selected.className = 'moduleRow-odd';
object.className = 'moduleRowSelected-odd';
}

}
//selected.className = 'moduleRow';
//object.className = 'moduleRowSelected';
selected = object;

// one button is not an array
  if (document.checkout_payment.payment[0]) {
    document.checkout_payment.payment[buttonSelect].checked=true;
  } else {
    document.checkout_payment.payment.checked=true;
  }
}

function rowOverEffect_1(object) {
  if (object.className == 'moduleRow-odd') object.className = 'moduleRowOver-odd';
}

function rowOverEffect_2(object) {
  if (object.className == 'moduleRow-even') object.className = 'moduleRowOver-even';
}

function rowOutEffect_1(object) {
  if (object.className == 'moduleRowOver-odd') object.className = 'moduleRow-odd';
}

function rowOutEffect_2(object) {
  if (object.className == 'moduleRowOver-even') object.className = 'moduleRow-even';
}

//--></script>

</head>
<body>

<table>
<tr class="moduleRow-odd" onmouseover="rowOverEffect_1(this)" onmouseout="rowOutEffect_1(this)" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onmouseover="rowOverEffect_2(this)" onmouseout="rowOutEffect_2(this)" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
</table>

</body>
</html>

テスト時に、オプションを数回クリックした後、交互の静的背景 (奇数/偶数行が同じ色になる) とロールオーバーの一部が失われます。

どんな助けでも大歓迎です。

敬具、

デニス

4

2 に答える 2

0

他の人が使用できるように、完全なコード スニペットを以下に示します。すべての功績は、私を正しい道に導いてくれた Dany Khalife のおかげです。

独自のものを反映するように JavaScript を調整することを忘れないでください: - ファイル名 (私の場合: rollover_test ) - 入力フィールドの名前 (私の場合: payment )

<html>
 <head>
<style type="text/css">
tr.moduleRow-odd {
   BACKGROUND-COLOR            : #FF0000;
}

tr.moduleRow-even {
   BACKGROUND-COLOR            : #00FF00;
}

tr.moduleRow-odd:hover, tr.moduleRow-even:hover {
    BACKGROUND-COLOR            : #FFFF00;
}

.moduleRowSelected-odd, .moduleRowSelected-even {
    BACKGROUND-COLOR            : #0000FF; 
}
</style>
 </head>

 <body>
<script>
 var selected;

 function isEven(value) {
    if (value%2 == 0)
        return true;
    else
        return false;
}

function selectRowEffect(object, buttonSelect) {
    if (!selected) {
       if (document.getElementById) {
           selected = document.getElementById('defaultSelected');
       } else {
           selected = document.all['defaultSelected'];
       }
   }

   if (selected) {
       if (selected.className == 'moduleRowSelected-even') {
           selected.className = 'moduleRow-even';
       }

       if (selected.className == 'moduleRowSelected-odd') {
           selected.className = 'moduleRow-odd';
       }
   }

   object.className = isEven(buttonSelect) == false ? "moduleRowSelected-even" : "moduleRowSelected-odd";

   selected = object;

   // one button is not an array
   if (document.rollover_test.payment[0]) {
       document.rollover_test.payment[buttonSelect].checked=true;
   } else {
       document.rollover_test.checked=true;
    }
}
</script>

<table>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 2)">
  <td>Option 3 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 3" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 3)">
  <td>Option 4 - Row-even</td>
  <td><input type="radio" name="payment" value="option 4" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 4)">
  <td>Option 5 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 5" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 5)">
  <td>Option 6 - Row-even</td>
  <td><input type="radio" name="payment" value="option 6" /></td>
</tr>
</table>
  </body>
</html>

注: 次のように、 selectRowEffect(this, XX)でXX を 0 と 1 の間で交互に使用すると、スクリプトは同様に機能します 。

<table>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
  <td>Option 3 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 3" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 4 - Row-even</td>
  <td><input type="radio" name="payment" value="option 4" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
  <td>Option 5 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 5" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 6 - Row-even</td>
  <td><input type="radio" name="payment" value="option 6" /></td>
</tr>
</table>
于 2013-07-12T09:09:30.330 に答える
0

ロジックの問題を修正するために selectRowEffect 関数を修正しました

ご覧のとおり、選択した行が偶数かどうかを確認し、そのクラスを本来あるべき状態に戻す (選択を解除する) だけで済みます。

次に、クリックした行のクラスを、対応する選択したものに変更できます。? :基本的に の前の条件をテストする三項演算子を使用したことに注意してください。?真の場合は間の部分を返し?、:そうでない場合は の後の部分を返します:。戻り値は、オブジェクトの className に影響します。

これが実際の動作をすばやく確認するためのフィドルです。

function selectRowEffect(object, buttonSelect) {
    if (!selected) {
        if (document.getElementById) {
            selected = document.getElementById('defaultSelected');
        } else {
            selected = document.all['defaultSelected'];
        }
    }

    if (selected) {
        if (selected.className == 'moduleRowSelected-even') {
            selected.className = 'moduleRow-even';
        }

        if (selected.className == 'moduleRowSelected-odd') {
            selected.className = 'moduleRow-odd';
        }
    }

    object.className = buttonSelect == 1 ? "moduleRowSelected-even" : "moduleRowSelected-odd";

    selected = object;

    // one button is not an array
    if (document.checkout_payment.payment[0]) {
        document.checkout_payment.payment[buttonSelect].checked=true;
    } else {
        document.checkout_payment.payment.checked=true;
    }
}
于 2013-07-11T19:03:39.210 に答える