HTML + javascript mouse over, mouseout, onclick not working in firefox

My question is to get onMouseover,onMouseout,onMousedown,onClick on a table row. For which i am calling javascript userdefined functions.

onMouseover --- Background color should change. onMouseout --- Reset to original color onClick --- First column checkbox/radio button should be set and background color should change onMousedown --- background color should change.

My code in html is:- <tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >

and the methods in javascripts are:-

var first_state = false;

var oldcol = '#ffffff'; 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';
    }
}

}

It is working as expected in IE.

But coming to firefox i am surprised on seeing the output after so much of coding.

In Firefox:-- onMouseOver is working as expected. color change of that particular row.

onClick -- Setting the background color permenantly..eventhough i do onmouseover on different rows. the clicked previous row color is not reset t开发者_运维技巧o white. -- not as expected

onclick on 2 rows..the background of both the rows is set..Only the latest row color should be set. other rows that are selected before should be set back..not as expected i.e if i click on all the rows..background color of everything is changed...

Eventhough i click on the row. First column i.e radio button or checkbox is not set..

Please help me to solve this issue in firefox. Do let me know where my code needs to be changed...

Thanks in advance!!

---

Sorry for making everything inline, but this should work in all browsers:

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

Here is a complete page you can test out:

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

I would strongly advise moving everything to an external JS file and using some sort of initialization function to assign the event listeners, instead of writing them all inline like me.

I hope this helps in some way.

---

There may be a particular reason you haven't, but have you considered using a library such as JQuery to tackle this? What you're trying to achieve here could be done very easily and simply with JQuery's CSS-like selectors and .parent/.parents.

As MartyIX says, I would start by using console.log and/or breakpoints in Firebug / Chrome to check exactly which code blocks are being executed. Using the javascript debugging tools can be a little daunting at first until you get how each of the options (step into, step over) work, but they do allow you to check that the code is working as you think it is very easily.

One thing I notice in checkit() - be careful with where you declare variables. I'm not an expert with javascripts variable scoping, but to me it looks like the typ variable only exists within the if block. I would declare "var typ" before the if block and use a third value or second variable to check whether any checkbox or radio is found (what happens if no checkbox and no radio is found?)