鼠标悬停时更改列数

Question

我试图在鼠标悬停时用一个 td 替换三个 td： 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>

mouseover 有效，但 mouseout 被忽略。

Answer 1

mouseout 事件在更改元素的 innerHTML 后不起作用。具体原因我也不知道。

您可以通过将单个单元格添加到 html 并切换单元格的可见性来实现。

JSFiddle

Answer 2

尝试一下它会起作用。

<html>

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

</html>

鼠标悬停时更改列数

Change number of columns on mouseover

javascript

html-table

onmouseover

onmouseout