title: HTML + javascript mouse over, mouseout, onclick not working in firefox
body: <p>My question is to get onMouseover,onMouseout,onMousedown,onClick on a table row. For which i am calling javascript userdefined functions. </p>
  
  <p>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.</p>
  
  <p>My code in html is:-
  <code>&lt;tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" &gt;</code></p>
  
  <p>and the methods in javascripts are:-</p>
  
  <p>var first_state = false;</p>
  
  <p>var oldcol = '#ffffff';
  var oldcol_cellarray = new Array();</p>
  
  <p>function hover(element) {</p>
  
  <pre><code>if (! element) element = this;
  while (element.tagName != 'TR') {
      element = element.parentNode;
  }
  
  if (element.style.fontWeight != 'bold') {
      for (var i = 0; i&lt;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';
  
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>// -----------------------------------------------------------------------------------------------</p>
  
  <p>function hover_out(element) {</p>
  
  <pre><code>if (! element) element = this;
  while (element.tagName != 'TR') {
      element = element.parentNode;
  }
  
  if (element.style.fontWeight != 'bold') {
      for (var i = 0; i&lt;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();
  
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>// -----------------------------------------------------------------------------------------------</p>
  
  <p>function get_first_state(element) {</p>
  
  <pre><code>while (element.tagName != 'TR') {
      element = element.parentNode;
  }
  first_state = element.cells[0].firstChild.checked;
  </code></pre>
  
  <p>}</p>
  
  <p>// -----------------------------------------------------------------------------------------------</p>
  
  <p>function checkit (element) {</p>
  
  <pre><code>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 &amp;&amp; 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&lt; table.length; i++) {
              if (table[i].cells[0].firstChild.checked == true &amp;&amp; table[i] != element) {
                  table[i].cells[0].firstChild.checked = false;
              }
              if (table[i].cells[0].firstChild.checked == false) {
                  set_rowstyle(table[i], false);
              }
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>function set_rowstyle(r, on) {</p>
  
  <pre><code>if (on == true) {
      for (var i =0; i &lt; r.cells.length; i++) {
          r.style.fontWeight = 'bold';
          r.cells[i].style.backgroundColor = '#f2f2c2';
  
      }
  } else {
      for ( i =0; i &lt; r.cells.length; i++) {
          r.style.fontWeight = 'normal';
          r.cells[i].style.backgroundColor = '#ffffff';
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>It is working as expected in IE.</p>
  
  <p>But coming to firefox i am surprised on seeing the output after so much of coding.</p>
  
  <p><strong>In Firefox:--</strong>
  onMouseOver is working as expected. color change of that particular row.</p>
  
  <p>onClick -- Setting the background color permenantly..eventhough i do onmouseover on different rows. the clicked previous row color is not reset to white. -- <em>not as expected</em></p>
  
  <p>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..<em>not as expected</em> i.e if i click on all the rows..background color of everything is changed...</p>
  
  <p>Eventhough i click on the row. First column i.e radio button or checkbox is not set..</p>
  
  <p>Please help me to solve this issue in firefox. Do let me know where my code needs to be changed...</p>
  
  <p>Thanks in advance!! </p>