Ad

Change Number Of Columns On Mouseover

I am trying to replace three td's with a single td on mouseover: Sample code in JSFiddle

<html>
  <body>
    <table border="1">
      <tr onmouseover="this.innerHTML='<td colspan=3>ABC</td>'" onmouseout="this.innerHTML='<td>A</td><td>B</td><td>C</td>'">

        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
   </table>
</body>

The mouseover works, but the mouseout is ignored.

Ad

Answer

The mouseout event doesn't work after changing the innerHTML of the element. I don't know to explain exactly why.

You can do it by adding the single cell into the html, and toggling the visibilty of the cells.

JSFiddle

Ad
source: stackoverflow.com
Ad