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 函数以解决您的逻辑问题

如您所见，您只需要检查所选行是否偶数并将其类恢复为我应该是的（取消选择它）。

然后，您可以将单击的行的类更改为相应的选定类。请注意，我使用了? :三元运算符，它基本上测试了之前的条件?，如果为真，则返回之间的部分?，:否则返回之后的部分:。然后返回的值会影响到对象的类名。

这是快速查看它的作用的小提琴。

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 回答