javascript - HTML + javascript 鼠标悬停、鼠标移出、onclick 在 Firefox 中不起作用

Question

我的问题是在表行上获取 onMouseover、onMouseout、onMousedown、onClick。为此我调用 javascript 用户定义函数。

onMouseover --- 背景颜色应该改变。onMouseout --- 重置为原始颜色onClick --- 应设置第一列复选框/单选按钮并且背景颜色应更改onMousedown --- 背景颜色应该改变。

我的 html 代码是:- <tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >

JavaScript 中的方法是:-

varfirst_state = false;

var oldcol = '#ffffff';var oldcol_cellarray = new Array();

函数悬停(元素){

if (! element) element = this;
while (element.tagName != 'TR') {
    element = element.parentNode;
}

if (element.style.fontWeight != 'bold') {
    for (var i = 0; i<element.cells.length; i++) {
        if (element.cells[i].className != "no_hover") {
            oldcol_cellarray[i] = element.cells[i].style.backgroundColor;
            element.cells[i].style.backgroundColor='#e6f6f6';

        }
    }
}

}

//--------------------------------------------------------- --------------------------------------------------

函数hover_out(元素){

if (! element) element = this;
while (element.tagName != 'TR') {
    element = element.parentNode;
}

if (element.style.fontWeight != 'bold') {
    for (var i = 0; i<element.cells.length; i++) {
        if (element.cells[i].className != "no_hover") {
            if (typeof oldcol_cellarray != undefined) {

                element.cells[i].style.backgroundColor=oldcol_cellarray[i];
            } else {
                element.cells[i].style.backgroundColor='#ffffff';

            }
        //var oldcol_cellarray = new Array();

        }
    }
}

}

//--------------------------------------------------------- --------------------------------------------------

函数 get_first_state(element) {

while (element.tagName != 'TR') {
    element = element.parentNode;
}
first_state = element.cells[0].firstChild.checked;

}

//--------------------------------------------------------- --------------------------------------------------

函数 checkit(元素){

while (element.tagName != 'TR') {
    element = element.parentNode;
}
if (element.cells[0].firstChild.type == 'radio') {
    var typ = 0;
} else if (element.cells[0].firstChild.type == 'checkbox') {
    typ = 1;
}
if (element.cells[0].firstChild.checked == true && typ == 1) {
    if (element.cells[0].firstChild.checked == first_state) {
        element.cells[0].firstChild.checked = false;
    }
    set_rowstyle(element, element.cells[0].firstChild.checked);
} else {
    if (typ == 0 || element.cells[0].firstChild.checked == first_state) {
        element.cells[0].firstChild.checked = true;

    }
    set_rowstyle(element, element.cells[0].firstChild.checked);
}
if (typ == 0) {
    var table = element.parentNode;
    if (table.tagName != "TABLE") {
        table = table.parentNode;
    }
    if (table.tagName == "TABLE") {
        table=table.tBodies[0].rows;
        //var table = document.getElementById("js_tb").tBodies[0].rows;
        for (var i = 1; i< table.length; i++) {
            if (table[i].cells[0].firstChild.checked == true && table[i] != element) {
                table[i].cells[0].firstChild.checked = false;
            }
            if (table[i].cells[0].firstChild.checked == false) {
                set_rowstyle(table[i], false);
            }
        }
    }
}

}

函数 set_rowstyle(r, on) {

if (on == true) {
    for (var i =0; i < r.cells.length; i++) {
        r.style.fontWeight = 'bold';
        r.cells[i].style.backgroundColor = '#f2f2c2';

    }
} else {
    for ( i =0; i < r.cells.length; i++) {
        r.style.fontWeight = 'normal';
        r.cells[i].style.backgroundColor = '#ffffff';
    }
}

}

它在 IE 中按预期工作。

但是来到 Firefox 后，我很惊讶地看到经过这么多编码后的输出。

在 Firefox 中:--onMouseOver 正在按预期工作。该特定行的颜色变化。

onClick - 永久设置背景颜色..即使我在不​​同的行上进行 onmouseover 操作。单击的上一行颜色不会重置为白色。 -- 不符合预期

onclick 2 行..两行的背景均已设置..仅应设置最新的行颜色。之前选择的其他行应该被设置回来..不符合预期，即如果我单击所有行..所有内容的背景颜色都会更改...

尽管我点击了该行。第一列，即单选按钮或复选框未设置。

请帮我解决 Firefox 中的这个问题。请让我知道我的代码需要更改的地方...

提前致谢!!

Answer 1

抱歉让所有内容都内联，但这应该适用于所有浏览器:

<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">

这是您可以测试的完整页面:

<html>
<head>
<style type="text/css">
tr.click{
background:yellow;
}

tr.hover{
background:green;
}
</style>
</head>
<body>
<table border="1">
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
</table>
</body>
</html>

我强烈建议将所有内容移至外部 JS 文件并使用某种初始化函数来分配事件监听器，而不是像我一样将它们全部内联编写。

我希望这能在某种程度上有所帮助。