<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("table").mouseover(function(){ var i = 1; $("tr").each(function(){ $("td:first-child",this).replaceWith("<th>(" + i + ")テキスト</th>"); i++; }); $("th:first-child","tr").css("background-color","#FF0000"); }).mouseout(function(){ $("tr").each(function(){ $("th:first-child",this).replaceWith("<td>テキスト</td>"); }); $("td:first-child","tr").css("background-color","none"); }); }); </script> <style> table{ cursor:pointer; } </style> </head> <body> <table border="1"> <tr> <td>テキスト</td><td>テキスト</td><td>テキスト</td> </tr> <tr> <td>テキスト</td><td>テキスト</td><td>テキスト</td> </tr> <tr> <td>テキスト</td><td>テキスト</td><td>テキスト</td> </tr> <tr> <td>テキスト</td><td>テキスト</td><td>テキスト</td> </tr> </table> </body> </html>