Question

我遇到了以下挑战：

我的表有偶数/奇数行的基本（静态）交替配色方案，包含不同的选项（类）。
另外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>

测试时，在选项上单击几次后，我会松开交替的静态背景（奇数/偶数行获得相同的颜色）和部分翻转。

非常感谢任何帮助。

亲切的问候，

丹尼斯

Answer 1

我修改了你的selectRowEffect函数以修复你的逻辑问题

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

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

以下fiddle可以快速查看它的实际效果。

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;
    }
}

Answer 2

我将完整的代码段放在下面供其他人使用。所有的功劳归功于Dany Khalife，他让我走上正轨。

请记住调整javascript以反映您自己的： - 文件名（在我的情况下： rollover_test ） - 输入字段的名称（在我的情况下：付款）

<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）中交替使用0到1之间的XX时，该脚本也可以正常工作，像这样：

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

Javascript翻转

2 个答案: