Question

我的问题是在onMouseover，onMouseout，onMousedown上点击表格行。我正在调用javascript用户定义的函数。

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

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

和javascripts中的方法是： -

var first_state = false;

var oldcol ='＃fffffff'; var oldcol_cellarray = new Array（）;

function hover（element）{

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

        }
    }
}

}

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

function hover_out（element）{

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();

        }
    }
}

}

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

function get_first_state（element）{

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

}

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

function checkit（element）{

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

}

function 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。单击的上一行颜色不会重置为白色。 - 与预期不符合

在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文件并使用某种初始化函数来分配事件监听器，而不是像我一样将它们全部内联写入。

我希望这会有所帮助。

Answer 2

可能有一个特殊的原因你没有，但是你考虑过使用像JQuery这样的库来解决这个问题吗？您在这里尝试实现的目标可以通过JQuery的类似CSS的选择器和.parent / .parents轻松完成。

正如MartyIX所说，我将首先在Firebug / Chrome中使用console.log和/或断点来检查正在执行的代码块。使用javascript调试工具起初可能有点令人生畏，直到你了解每个选项（步入，跳过）的工作方式，但它们确实允许你检查代码是否正常工作，因为你认为这很容易。 / p>

我在checkit（）中注意到一件事 - 小心你声明变量的位置。我不是javascripts变量范围的专家，但对我来说，看起来typ变量只存在于if块中。我会在if块之前声明“var typ”并使用第三个值或第二个变量来检查是否找到任何复选框或无线电（如果没有找到复选框和没有收音机会怎么样？）

HTML + javascript鼠标悬停，mouseout，onclick无法在Firefox中运行

2 个答案: