【发布时间】：2013-07-11 18:29:00
【问题描述】：
我遇到了以下挑战：
- 我的表格有一个基本（静态）交替颜色方案，用于偶数/奇数行，包含不同的选项（类）。
- 此外，Javascript 应提供：
- 显示光标指向哪一行的翻转效果（onmouseover、onmouseout）
- 包含通过鼠标单击 (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>
测试时，在选项上单击几次后，我松开了交替的静态背景（奇数行/偶数行获得相同的颜色）和部分翻转。
非常感谢任何帮助。
亲切的问候，
丹尼斯
【问题讨论】：
-
我建议你把翻转效果留给 CSS。只需将
:hover添加到选择器，仅当鼠标悬停在匹配的节点上时才应用规则。使用tr:hover之类的东西作为选择器来帮助您入门 -
您甚至可以应用颜色过渡来柔化效果。
-
还有一件事，如果与旧浏览器的兼容性不成问题，请使用
:nth-child(even)和:nth-child(odd)而不是手动向每一行添加类:) -
为了更好地查看观察到的效果，复制表格的最后两行（并重命名为选项 3 和 4）并添加到表格的底部。
-
您的问题在于 selectRowEffect。基本上你正在做的是，如果选定的行是偶数，那么你正在使点击的行成为偶数......而奇数也是如此，所以发生的事情是你的第一个选择确定了以下点击的类。如果您先选择了一个奇数，则以下所有点击都会使行变得奇数，依此类推..
标签： javascript rollover