Search code examples
javascripthtml-tableonmouseoveronmouseout

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.

Solution

  • 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